问题描述
在前后端分离项目中,由于前端要接收后端接口返回的数据而产生的错误信息(跨域问题)。
错误信息
Access to XMLHttpRequest at 'http://localhost:8090/user/getotp' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方法
后端:
- 在对象的Controller类上加上注解@CrossOrigin。
@CrossOrigin(originPatterns = "*",allowCredentials = "true",allowedHeaders = "*")
- 前端数据交互部分要加上以下内容:
xhrFields:{withCredentials:true}
你可能会遇到如下问题:
前后端设置的都没问题了,但是设置在session域中的值,还是不能进行跨域访问。
跨域问题解决方案,有问题的童鞋看过来。
google配置后仍然无法正确获取otpcode。由于谷歌浏览器的SameSite安全机制的问题,浏览器在跨域的时候不允许request请求携带cookie,导致每次sessionId都是新的,这里有个出问题前提:跨域,刚好和调试时的环境情况一致。浏览器版本chrome84.0.4147.135(谷歌游览器好像从80版本之后就加入了SameSite安全机制),直接在地址栏里输入chrome://flags/,然后在搜索框里搜索关键字SameSite,找到与之匹配的项SameSite by default cookies,将其设置为Disabled,然后关闭浏览器再打开,请求。
更新:
chrome91版本cookie禁用:
解决办法:
创建chrome快捷方法,右键–属性:在目标中加入以下内容:
–disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure
启动项目调试的时候,需要用使用快捷方法打开的浏览器。