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

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。