前端vue项目中axios解决跨域问题总结

最新推荐文章于 2024-08-19 17:40:00 发布

小城听风雨

最新推荐文章于 2024-08-19 17:40:00 发布

阅读量4.6k

点赞数 6

分类专栏： vue的使用心得文章标签：前端vue项目中axios解决跨域问题总结 axios解决跨域

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/a5252145/article/details/97796455

版权

36 篇文章 1 订阅

订阅专栏

1.在main.js中，axios下面添加如下代码：

axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json';

在这里插入图片描述

2.在config文件夹下的index.js中，dev下的proxyTable对象下添加如下代码：

proxyTable: {
  '/api':{
    target: "http://47.92.153.134:8911/",
    changeOrigin:true,
    pathRewrite:{
        '^/api':''
    }
  }
},

在这里插入图片描述

其中：target为访问地址，在使用axios时候，直接写就行。

axios.get('nanning')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

url请求地址中nanning相当于之前的：http://47.92.153.134:8911/nanning

原理：因为我们给url加上了前缀/api，我们访问nanning就当于访问了：localhost:8080/api/nanning（其中localhost:8080是默认的IP和端口）。在index.js中的proxyTable中拦截了/api,并把/api及其前面的所有替换成了target中的内容，因此实际访问Url是http://47.92.153.134:8911/nanning。