跨域

瀏覽器的同源策略限制。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協(xié)議，主機和端口號

• 當一個請求url的協(xié)議、域名、端口三者之間任意一個與當前頁面不同即為跨域

處理方案

• 在前端設(shè)置代理。在SpringBoot + Vue 后臺管理系統(tǒng)（一）：創(chuàng)建項目文章末尾就使用到了。

• 在服務(wù)端添加攔截器（Interceptor）/過濾器（Filter）設(shè)置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;
    }
  

總結(jié)： 解決跨域訪問--修改響應(yīng)頭。
注意：來源盡量不要使用 * 統(tǒng)配符號；設(shè)置了準許攜帶cookie就不能使用通配符 *