Vue跨域问题踩坑

legend_go

已于 2022-01-26 11:02:29 修改

阅读量853

点赞数 1

分类专栏：前端Vue相关文章标签： vue.js 前端 javascript

于 2022-01-23 17:12:11 首次发布

本文链接：https://blog.csdn.net/legend_go/article/details/122653753

版权

前端Vue相关专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端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-2_defaultbaidujs_baidulandingword~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3