前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案

一.问题背景

前后端分离项目跨域问题，浏览器控制台报错：No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求方法为OPTIONS，状态值为302或403。

本文解决常见的CORS跨域问题，以及，集成CAS 5.3单点登录内嵌页面时，发送复杂请求产生的跨域问题。

二.解决方案

1.Nginx或Tomcat配置

通过Nginx或Tomcat配置，返回相应的请求头，本文采用Tomcat配置方式。

（1）修改conf/web.xml，添加过滤器，若存在其他过滤器添加在最前面。

  CorsFilter  org.apache.catalina.filters.CorsFilter      cors.allowed.origins    *        cors.allowed.methods    GET,POST,HEAD,OPTIONS,PUT        cors.allowed.headers    Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers        cors.exposed.headers    Access-Control-Allow-Origin,Access-Control-Allow-Credentials        cors.support.credentials    true        cors.preflight.maxage    10    CorsFilter  /*

（2）此时tomcat8.5以上版本可能会报错javax.servlet.ServletException: 当allowedOrigins=[*]时，不允许配置supportsCredentials=[true]

去掉20~23行配置，或将cors.allowed.origins配置为允许跨域访问当前服务器资源的地址，多个地址用逗号拼接。

示例：

  CorsFilter  org.apache.catalina.filters.CorsFilter      cors.allowed.origins    http://cpmp.fulongai.cn,http://192.168.2.154:8888/        cors.allowed.methods    GET,POST,HEAD,OPTIONS,PUT        cors.allowed.headers    Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers        cors.exposed.headers    Access-Control-Allow-Origin,Access-Control-Allow-Credentials        cors.support.credentials    true        cors.preflight.maxage    10    CorsFilter  /*

至此，大多数CORS的问题都可以解决了，但对于复杂请求仍需进一步分析。

2.复杂请求

对于复杂请求，浏览器会先发送一个OPTIONS类型的请求进行预检，服务端会根据请求标头判断是否允许访问请求的资源。

举个例子：

截图的中的预检请求包含请求表头如下：

Access-Control-Request-Headers: authorizationAccess-Control-Request-Method: GETOrigin: http://192.168.2.154:8888/

服务端应允许相应的访问，才能预检成功。看看我们之前的配置，GET请求和http://192.168.2.154:8888/源都满足，缺少Access-Control-Request-Headers的authorization支持，因此OPTIONS预检返回403，无权限访问。

控制台：

仍然报错No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案：

在web.xml中添加相应的配置（14行末尾authorization），问题解决：

  CorsFilter  org.apache.catalina.filters.CorsFilter      cors.allowed.origins    http://cpmp.fulongai.cn,http://192.168.2.154:8888/        cors.allowed.methods    GET,POST,HEAD,OPTIONS,PUT        cors.allowed.headers    Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,authorization        cors.exposed.headers    Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Access-Control-Allow-Headers,Access-Control-Allow-Method,Set-Cookie        cors.support.credentials    true        cors.preflight.maxage    1000    CorsFilter  /*

重启tomcat，再次请求，请求标头和响应头相对应，预检通过，可正常访问。

至此，问题解决。

参考：

https://tomcat.apache.org/tomcat-8.5-doc/config/filter.html

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

来源地址：https://blog.csdn.net/secretdaixin/article/details/129240863