前后端分离跨域问题

这个文档更详细：https://blog.csdn.net/cuixiaogang110/article/details/81948173

 

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

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

• 协议:https//;
• 域名:yuanting.com;
• 端口:8080;

解决跨域访问--修改响应头。

跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-Allow-Origin 及相关一系列参数，提供跨域访问的允许策略。

• 通过在响应 header 中设置 ‘*’ 来允许来自所有域的跨域请求访问。

response.setHeader("Access-Control-Allow-Origin", "*");

 

• 只允许来自特定域 http://my.yuanting:8080 的跨域访问

response.setHeader("Access-Control-Allow-Origin", "http://my.yuanting.cn:8080");

 

• 较灵活的设置方式，允许所有包含 mydomain.com 的域名访问.

if(request.getHeader("Origin").contains("mydomain.com")) {
    response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
}

在拦截器 或者每个方法中加入这三句代码就可以解决跨域问题

response.setHeader("Access-Control-Allow-Credentials", "true");//访问控制控允许凭据
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//访问控制允许来源ip地址
response.setHeader("Access-Control-Allow-Headers","content-type");//访问控制控允许报头

 

在服务端添加拦截器（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;
    }

参考：

https://www.jianshu.com/p/4c4e998dc7bd

https://blog.csdn.net/yuanting_/article/details/88083744