跨域测试代码 - console 里面直接就可以测试

跨域测试代码 - console 里面直接就可以测试

var xhr = new XMLHttpRequest(); xhr.open("GET", "https://www.baidu.com"); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); }

Access-Control-Allow-Origin:* 如何写代码才不跨域 axios get
说是不携带cookie,得写个前后台验证一下,为什么我写的 axios.request 就报跨域了。

// withCredentials 表示跨域请求时是否需要使用凭证
withCredentials: false, // default

axios修改origin
https://blog.51cto.com/u_16099164/6619670

1|0第一个坑:

No ‘Access-Control-Allow-Origin’ header
后端解决方案:这一步前端还不需要做啥,后端在响应头中把“Access-Control-Allow-Origin”设置为“*”,这是大家最熟悉的解决方案了。

2|0第二个坑:

登录前的页面一切正常,登录后的页面,也就是需要携带cookie请求的页面,就会出现401报错,即用户没有访问权限,需要进行身份认证,说白了就是没有携带cookie请求后端。

前端解决方案:这是axios的坑,axios发送请求默认不携带cookie,需要前端设置一下。这个是全局配置的axios,每次请求的时候配置也行,但全局更方便一点。

登录后复制
axios.defaults.withCredentials = true;

后端解决方案:

同时,后端也需要配合修改,因为前端设置了withCredentials为true,后端的’Access-Control-Allow-Origin’不允许再使用通配符“”(根据报错的字面意思),否则又会出现跨域问题。跨域报错信息:The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’.

3|0第三个坑:

前端接收到后端的响应头中有Set-Cookie,但就是没有写入浏览器的cookie中,所以还是无法请求到需要携带cookie的页面。

此时的跨域报错信息:The ‘Access-Control-Allow-Origin’ header has a value that is not equal to the supplied origin. 而且如果前后端运行在同一台电脑上就没有这个问题,如果不在同一台电脑上,比如后端在服务器上,前端在本地,就有这个问题。


__EOF__

本文作者Reciter
本文链接https://www.cnblogs.com/pengchenggang/p/17607178.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   彭成刚  阅读(287)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
历史上的今天:
2022-08-04 iview Button按钮 全局click事件vue拦截 节流 - 防抖 Throttle debounce
2022-08-04 masscode.io snippets 和 vscode 联动 代码片段
2022-08-04 FastGithub.UI64位中文版V2.1.4绿色版 - 软件推荐
点击右上角即可分享
微信分享提示