常见的跨域处理方案

617 阅读2分钟

跨域

浏览器的同源策略限制。同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议,主机和端口号

  • 当一个请求url的协议、域名、端口三者之间任意一个与当前页面不同即为跨域

处理方案

  • 在前端设置代理。在SpringBoot + Vue 后台管理系统(一):创建项目文章末尾就使用到了。

  • 在服务端添加拦截器(Interceptor)/过滤器(Filter)设置Header。 例子:

  • Interceptor

      public class CORSInterceptor implements HandlerInterceptor {
      	@Override
      	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
      			throws Exception {
      		String Origin = request.getHeader("Origin");
      		response.setHeader("Access-Control-Allow-Origin", Origin);
      		response.setHeader("Access-Control-Allow-Credentials", "true");
      		response.setHeader("Access-Control-Allow-Headers", "Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type"); 
      		response.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT"); 
              if(request.getMethod().equals("OPTIONS")) {
              	response.setStatus(200);
              	return false;
              }
      		return true;
      	}
      
      	@Override
      	public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
      			ModelAndView modelAndView) throws Exception {
      
      	}
      
      	@Override
      	public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
      			throws Exception {
      	}
      }
      // 注入配置Bean
      @Configuration
      public class WebMvcConfig implements WebMvcConfigurer {
      
      	@Bean
      	public CORSInterceptor corsInterceptor() {
      		return new CORSInterceptor();
      	}
      	
      	@Override
      	public void addInterceptors(InterceptorRegistry registry) {
      		registry.addInterceptor(corsInterceptor())
      				.addPathPatterns("/**");
      	}
      }
    
  • Filter

      @Component
      public class CORSFilter implements Filter {
       
          @Override
          public void destroy() { }
       
          @Override
          public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
                  throws IOException, ServletException {
          	HttpServletRequest httpServletRequest = (HttpServletRequest)request;
          	String origin = httpServletRequest.getHeader("Origin");
              HttpServletResponse  httpServletResponse = (HttpServletResponse) response;
              httpServletResponse.setHeader("Access-Control-Allow-Origin", origin);
              httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
              httpServletResponse.setHeader("Access-Control-Allow-Headers", "Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type"); 
              httpServletResponse.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT"); 
              if(httpServletRequest.getMethod().equals("OPTIONS")) {
              	httpServletResponse.setStatus(200);
              }
              chain.doFilter(httpServletRequest, httpServletResponse);    
          }
       
          @Override
          public void init(FilterConfig arg0) throws ServletException { }
       }
    
  • Nginx代理

      location /webview{
          # 注意:if () {}中间空格必须加上。 
          if ($request_method = 'OPTIONS') { 
              add_header Access-Control-Allow-Origin $http_origin always;
              add_header Access-Control-Allow-Credentials true;
              add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
              add_header Access-Control-Allow-Headers Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
              return 200;
          }
          alias /mypro/webview/dist;
          try_files $uri $uri/ @webview;
          index  index.html  index.htm;
          add_header Access-Control-Allow-Origin $http_origin always;
          add_header Access-Control-Allow-Credentials true;
          add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
          add_header Access-Control-Allow-Headers Authorization,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
      }
      location @webview{
          rewrite ^.*$ /webview/index.html last;
      }
    

总结: 解决跨域访问--修改响应头。 注意:来源尽量不要使用 * 统配符号;设置了准许携带cookie就不能使用通配符 *