Springboot跨域处理

1. 为什么出现跨域

浏览器同源策略限制。 同源策略（Same Origin Policy）： 是一种约束；浏览器最核心也是最基础的安全功能。缺少了同源策略，浏览器正常功能都可能受影响。 同源策略阻止一个域的javaScript脚本和另一个域的内进行交互。所谓同源就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。

非同源限制： 【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB 【2】无法接触非同源网页的 DOM 【3】无法向非同源地址发送 AJAX 请求

Java 后端实现CORS跨域请求：

  1. 返回新的CorsFilter
  2. 重写 WebMvcConfigurer
  3. 使用注解 @CrossOrigin
  4. 手动设置响应头 (HttpServletResponse)
  5. 自定web filter 实现跨域

2.跨域处理

  1. # 1.返回新的CorsFilter（全局跨域）
  2. @Configuration
  3. public class GlobalCorsConfig {
  4.     @Bean
  5.     public CorsFilter corsFilter() {
  6.         //1. 添加 CORS配置信息
  7.         CorsConfiguration config = new CorsConfiguration();
  8.         //放行哪些原始域
  9.         config.addAllowedOrigin("*");
  10.         //是否发送 Cookie
  11.         config.setAllowCredentials(true);
  12.         //放行哪些请求方式
  13.         config.addAllowedMethod("*");
  14.         //放行哪些原始请求头部信息
  15.         config.addAllowedHeader("*");
  16.         //暴露哪些头部信息
  17.         config.addExposedHeader("*");
  18.         //2. 添加映射路径
  19.         UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
  20.         corsConfigurationSource.registerCorsConfiguration("/**",config);
  21.         //3. 返回新的CorsFilter
  22.         return new CorsFilter(corsConfigurationSource);
  23.     }
  24. }
  1. # 2.重写WebMvcConfigurer（全局跨域）
  2. @Configuration
  3. public class CorsConfig implements WebMvcConfigurer {
  4.     @Override
  5.     public void addCorsMappings(CorsRegistry registry) {
  6.         registry.addMapping("/**")
  7.                 //是否发送Cookie
  8.                 .allowCredentials(true)
  9.                 //放行哪些原始域
  10.                 .allowedOrigins("*")
  11.                 .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
  12.                 .allowedHeaders("*")
  13.                 .exposedHeaders("*");
  14.     }
  15. }
  1. # 3.使用注解 --在类上使用，允许类下方法跨域
  2. @RestController
  3. @CrossOrigin(origins = "*")
  4. public class HelloController {
  5.     @RequestMapping("/hello")
  6.     public String hello() {
  7.         return "hello world";
  8.     }
  9. }
  1. # 4.编写一个过滤器，起名叫MyCorsFilter.java
  2. import java.io.IOException;
  3. import javax.servlet.Filter;
  4. import javax.servlet.FilterChain;
  5. import javax.servlet.FilterConfig;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.ServletRequest;
  8. import javax.servlet.ServletResponse;
  9. import javax.servlet.http.HttpServletResponse;
  10. import org.springframework.stereotype.Component;
  11. @Component
  12. public class MyCorsFilter implements Filter {
  13.   public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
  14.     HttpServletResponse response = (HttpServletResponse) res;
  15.     response.setHeader("Access-Control-Allow-Origin", "*");
  16.     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
  17.     response.setHeader("Access-Control-Max-Age", "3600");
  18.     response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
  19.     chain.doFilter(req, res);
  20.   }
  21.   public void init(FilterConfig filterConfig) {}
  22.   public void destroy() {}
  23. }
  1. <!-- web.xml中配置跨域访问 -->
  2. <filter>
  3.  <filter-name>CorsFilter</filter-name>
  4.  <filter-class>com.mesnac.aop.MyCorsFilter</filter-class>
  5. </filter>
  6. <filter-mapping>
  7.  <filter-name>CorsFilter</filter-name>
  8.  <url-pattern>/*</url-pattern>
  9. </filter-mapping>

5. 前端使用jsonp进行跨域：

  1. # 在nginx/conf/ 目录下，新增enable-cors.conf文件
  2. # allow origin list
  3. set $ACAO '*';
  5. # set single origin
  6. if ($http_origin ~* (www.helloworld.com)$) {   #网站域名
  7.   set $ACAO $http_origin;
  8. }
  10. if ($cors = "trueget") {
  11.  add_header 'Access-Control-Allow-Origin' "$http_origin";
  12.  add_header 'Access-Control-Allow-Credentials' 'true';
  13.  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  14.  add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  15. }
  17. if ($request_method = 'OPTIONS') {
  18.   set $cors "${cors}options";
  19. }
  21. if ($request_method = 'GET') {
  22.   set $cors "${cors}get";
  23. }
  25. if ($request_method = 'POST') {
  26.   set $cors "${cors}post";
  27. }
  1. <!-- 在nginx.conf文件中添加配置 -->
  2. upstream front_server{
  3.   server www.helloworld.com:9000;
  4. }
  5. upstream api_server{
  6.   server www.helloworld.com:8080;
  7. }
  9. server {
  10.   listen       80;
  11.   server_name  www.helloworld.com;
  13.   location ~ ^/api/ {            <!--后端的映射-->
  14.     include enable-cors.conf;    <!--引入新增的配置信息-->
  15.     proxy_pass http://api_server;
  16.     rewrite "^/api/(.*)$" /$1 break;
  17.   }
  19.   location ~ ^/ {
  20.     proxy_pass http://front_server;
  21.   }
  22. }