问题描述

在前后端分离项目中,由于前端要接收后端接口返回的数据而产生的错误信息(跨域问题)。

错误信息

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.

解决方法

后端:

  1. 在对象的Controller类上加上注解@CrossOrigin。
@CrossOrigin(originPatterns = "*",allowCredentials = "true",allowedHeaders = "*")

  1. 前端数据交互部分要加上以下内容:
 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

启动项目调试的时候,需要用使用快捷方法打开的浏览器。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐