什么是跨域？
在正式的跨域请求之前，先发送了一个OPTIONS请求去询问服务器是否允许接下来的跨域请求在OPTIONS请求里新增了几个字段：”
- Origin：发起请求原来的域
- Access-Control-Request-Method：将要发起的跨域请求方式（GET/PUT/POST/DELETE/······）
- Access-Control-Request-Headers：将要发起的跨域请求中包含的请求头字段
“服务器在响应字段中来表明是否允许这个跨域请求，浏览器收到后检查如果不符合要求，就拒绝后面的请求”
- Access-Control-Allow-Origin：允许哪些域来访问（*表示允许所有域的请求）
- Access-Control-Allow-Methods：允许哪些请求方式
- Access-Control-Allow-Headers：允许哪些请求头字段
- Access-Control-Allow-Credentials：是否允许携带Cookie
由于安全原因，浏览器都遵循着同源原则，拦截了不同域名之间的请求。跨域请求，是指能让不同域名之间，可以相互发送请求。 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时，一个资源会发起一个跨域HTTP请求(Cross-site HTTP request)。 比如说，域名A ( http://domaina.example ) 的某 Web 应用程序中通过< img>标签引入了域名B( http://domainb.foo ) 站点的某图片资源(
http://domainb.foo/image.jpg)，域名A的那 Web 应用就会导致浏览器发起一个跨站 HTTP 请求。 在当今的 Web 开发中，使用跨站 HTTP 请求加载各类资源（包括CSS、图片、JavaScript 脚本以及其它类资源），已经成为了一种普遍且流行的方式。 正如大家所知，出于安全考虑，浏览器会限制脚本中发起的跨站请求。比如，使用 XMLHttpRequest 对象发起 HTTP 请求就必须遵守同源策略。 具体而言，Web 应用程序能且只能使用 XMLHttpRequest 对象向其加载的源域名发起 HTTP 请求，而不能向任何其它域名发起请求。为了能开发出更强大、更丰富、更安全的Web应用程序，开发人员渴望着在不丢失安全的前提下，Web 应用技术能越来越强大、越来越丰富。比如，可以使用 XMLHttpRequest 发起跨站 HTTP 请求。 跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是CSRF跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从HTTPS的域跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。
跨域访问报错如下：
OPTIONS http://localhost:8080/api/bocom/query/name/123
XMLHttpRequest cannot load http://localhost:8080/api/bocom/query/name/123. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.
一、第一种方式：1、在需要跨域的类或方法上方增加注解@CrossOrigin，只针对单个方法或类有效，适用于只有个别方法需要跨域的情况。
@RequestMapping(value = "/users") @RestController @CrossOrigin public class UserController { @Autowired private UserService userService; @RequestMapping(method = RequestMethod.POST) @CrossOrigin public User create(@RequestBody @Validated User user) { return userService.create(user); } ｝
二、第二种方式:
1、编写一个支持跨域请求的 Configuration
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; /** * 处理AJAX请求跨域的问题 * @author jeffrey * @time 2018-12-13 */ @Configuration public class CorsConfig extends WebMvcConfigurerAdapter { static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" }; @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS) .maxAge(3600); } }
2、HTTP请求接口
@RestController public class HelloController { @Autowired HelloService helloService; @GetMapping(value = "/test", produces = MediaType.APPLICATION_JSON_UTF8_VALUE) public String query() { return "hello"; } }
三、 第三种方式（推荐）PS：第一种存在一个问题，当服务器抛出 500 的时候依旧存在跨域问题
@SpringBootApplication @ComponentScan @EnableDiscoveryClient public class ManagementApplication { public static void main(String[] args) { SpringApplication.run(ManagementApplication.class, args); } private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.addExposedHeader(HttpHeaderConStant.X_TOTAL_COUNT);//可去掉 return corsConfiguration; } /** * 跨域过滤器 * * @return */ @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 4 return new CorsFilter(source); } }
也可以写成一个类，加注解@Configuration
package com.beenoisy.springboot.way.common.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 1、允许任何域名使用 corsConfiguration.addAllowedHeader("*"); // 2、允许任何头 corsConfiguration.addAllowedMethod("*"); // 3、允许任何方法（post、get等） return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 4 return new CorsFilter(source); } }
2、index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跨域请求</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({url:"http://localhost:8080/test",success:function(result){ $("#p1").html(result); }}); }); }); </script> </head> <body> <p width="500px" height="100px" id="p1"></p> <button>获取其他内容</button> </body> </html>
四、第四种方式，编写Filter过滤器
package com.cci.market.common.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Component; /** * 处理跨域问题 * @author jeffrey * @date 2019/08/08 * */ @Component public class OriginFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT"); //Access-Control-Max-Age表明了这个询问结果的有效期，后面浏览器在有效期内也可以不必再次询问 response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); chain.doFilter(req, res); } @Override public void destroy() { // TODO Auto-generated method stub } }
五、Nginx跨域配置Nginx跨域也比较简单，只需添加以下配置即可。
location / { proxy_pass http://localhost:8080; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token'; #Access-Control-Max-Age表明了这个询问结果的有效期，后面浏览器在有效期内也可以不必再次询问 add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token'; add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token'; add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token'; } }
其中：add_header '
Access-Control-Expose-Headers' 务必加上你请求时所带的header。例如本例中的“Token”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。