前端Vue向后端发送请求时遇到如下错误:
Response to preflight request doesn't pass access control check: 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'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
乍一看貌似是跨域问题,但是仔细排查后发现并不是,跨域已经设置好了。上网查询后得知是前端Vue的main.js出了问题,解决如下:
参考链接:https://www.cnblogs.com/superman-21/p/14065650.html
Vue学习Bug问题记录~
2022年1月23日凌晨纠正:
尽管上述操作的确可以解决一部分问题,如向服务端接口发送数据时不携带Session或Cookie,上述操作完全可以解决,但是问题是既然我们已经做了跨域了,为毛就不能携带Session或Cookie向服务端发送数据呢?(例如用户登录时的场景)因此改正后的做法为:
改后端代码:
如果还是有问题,那么可以再新建一个类写成下面这样保险起见~
最后贴上本人用到的前后端跨域处理核心部分,仅供参考,每个人都有不同的情况~
- 前端:
在/config/index.js文件里这样写(即设置代理操作嘿嘿嘿🤭)
proxyTable: { //设置代理
'/cardmis':{ //你的请求
target: 'http://localhost:8088',//你的后端服务器地址
changeOrigin: true, //是否允许跨域访问,true表示允许
pathRewrite:{
'^/cardmis':'' //路径重写,即这里理解成用‘/cardmis’代替target里面的地址,后面组件中我们掉接口时直接用cardmis代替 比如我要调用'http://localhost:8088/cardmis/add',直接写‘/cardmis/user/add’即可
}
}
- 后端:(双管齐下~)
一“管”:
二“管”:
这样一来问题即可得到解决,如果对您有用的,可以点个赞哦蟹蟹辣~
参考博文:https://blog.csdn.net/duansamve/article/details/112205355?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3