一.问题背景 前后端分离项目跨域问题,浏览器控制台报错:No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求方法为OPTioNS,
前后端分离项目跨域问题,浏览器控制台报错:No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求方法为OPTioNS,状态值为302或403。
本文解决常见的CORS跨域问题,以及,集成CAS 5.3单点登录内嵌页面时,发送复杂请求产生的跨域问题。
通过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的问题都可以解决了,但对于复杂请求仍需进一步分析。
对于复杂请求,浏览器会先发送一个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
--结束END--
本文标题: 前后端分离项目跨域问题No ‘Access-Control-Allow-Origin‘解决方案
本文链接: https://www.lsjlt.com/news/385299.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-13
2024-05-13
2024-05-11
2024-05-11
2024-05-10
2024-05-07
2024-04-30
2024-04-30
2024-04-30
2024-04-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0