vue-express跨域问题记录一下这个坑

最新推荐文章于 2023-09-16 08:01:34 发布

小吴头大

最新推荐文章于 2023-09-16 08:01:34 发布

阅读量425

点赞数

文章标签： vue.js node.js

本文链接：https://blog.csdn.net/weixin_43907110/article/details/106474739

版权

package.json中

“devServer”: {
“port”: 5000,//vue项目打开的端口号
“open”: true//是否打开浏览器
}
express.js中
在这里插入图片描述
app.all(’’,function (req, res, next) {
res.header(‘Access-Control-Allow-Origin’, '’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’);
res.header(‘Access-Control-Allow-Methods’, ‘PUT, POST, GET, DELETE, OPTIONS’);
next();
});
//处理跨域问题代码
main.js中在这里插入图片描述
axios.defaults.baseURL = ‘http://localhost:4000’//设置axios提交路径，4000和上面express中监听的端口号一致
总结一下自己在配的时候遇到的坑，网上百度的时候很多都说要配置代理也就是
“proxy”: {
“/api”: {
“target”: “http://localhost:5000”,
“changeOrigin”: true,
“pathRewrite”: {
“^/api”: “/api”
}这段代码，但是博主试过了还是一直会报各种bug，不是找不到get方法就是请求头过长，最后发现只要配置一下axios提交的默认路径就可以了，之所以没有注意到这一点是因为博主直接用了juqery中封装的 $a x i o s 方法，不是自己封装的。。。所以才在这里兜兜转转了很久。当然了，$ 方法还是方便很多的，省得自己封装了就是默认路径记得写一下。