原创 vue在本地或者linux/centos系统通过axios请求接口api数据跨域(Access-Control-Allow-Origin)问题解决

vue.js
IT技术 · phper · 更新于 2018-12-13

解决问题的前提需要配置好axios

npm install --save axios  

在main.js进行引入和注册全局

import axios from 'axios'

Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios  

vue在本地或者是服务器上面请求一个不同域名的接口地址时候会报一个错误

Failed to load 请求地址: Redirect from '请求地址' to ' 请求地址  ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '本地/服务器地址' is therefore not allowed access.

在项目的config目录下找到index.js文件修改proxyTable内容

proxyTable: {
'/request': {
target: 'http://www.zsyunding.com',//设置你调用的接口域名和端口号 需要加加http
changeOrigin: true,
pathRewrite: {
'^/request': ''//这里理解成用‘/request’代替target里面的地址,后面组件中我们掉接口时直接用request代替 比如我要调用'http://22.00.100.100:3002/user/add',在请求的时候接口直接写‘/request/user/add’即可
}
}
}

接下来在main.js文件添加编写

Vue.prototype.Home='/request'


在发起请求中这样写

this.$axios.get(this.Home+'/api/articles')
.then((rep) =>{
if(rep.status==200){
console.log(rep);
}
}).catch(function (error) {
console.log(error);
});

这边要注意写完之后,结束项目运行,重新启动!一定要重新启动 npm run dev


|0 收藏|1

思考你要发的内容