前后端分离常见问题一：跨域

跨域

浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。同源策略会阻止一个域的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就不能使用通配符 *