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

朱雀 2024-03-26 14:53 8阅读 0赞

#### 一.问题背景 ####

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

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

![b84c241795f2e03c5d80ec50582572c4.png][]

#### 二.解决方案 ####

##### 1.Nginx或Tomcat配置 #####

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

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

<filter>
      <filter-name>CorsFilter</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
      </init-param>
      <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
      </init-param>
      <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
      </init-param>
      <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
      </init-param>
    </filter>
    <filter-mapping>
      <filter-name>CorsFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

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

![aad11530675d8289d62093624878860c.png][]

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

**示例：**

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

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

##### 2.复杂请求 #####

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

**举个例子：**

![fc0012b89762d95c7779f12996313ace.png][]

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

Access-Control-Request-Headers: authorization
    Access-Control-Request-Method: GET
    Origin: http://192.168.2.154:8888

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

**控制台：**

![b84c241795f2e03c5d80ec50582572c4.png][]

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

**解决方案：**

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

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

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

![60fd20320332691c85fd0ee663a42292.png][]

至此，问题解决。

**参考：**

[https://tomcat.apache.org/tomcat-8.5-doc/config/filter.html\#CORS\_Filter][https_tomcat.apache.org_tomcat-8.5-doc_config_filter.html_CORS_Filter]

[https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS][https_developer.mozilla.org_zh-CN_docs_Web_HTTP_CORS]

[b84c241795f2e03c5d80ec50582572c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0ab566c138cb4ea480540e4305dd42cf.png
[aad11530675d8289d62093624878860c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2a916909def04b30a22ab9c8df9c7d4e.png
[fc0012b89762d95c7779f12996313ace.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4dd4f1902f0e4db4bbd50264bdd2561e.png
[http_192.168.2.154_8888]: http://192.168.2.154:8888
[60fd20320332691c85fd0ee663a42292.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/88f820bc4a794e99856f2163f8f77bbc.png
[https_tomcat.apache.org_tomcat-8.5-doc_config_filter.html_CORS_Filter]: https://tomcat.apache.org/tomcat-8.5-doc/config/filter.html#CORS_Filter
[https_developer.mozilla.org_zh-CN_docs_Web_HTTP_CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS