Vue cli3 跨域请求
问题
最近学了Vue 想写点demo练习一下 就用tp写了个接口
- 此时
- server：api.org:80/users
- client : 127.0.0.1:8080
当我写完请求后发现出问题了
// 请求代码
getUsersTable() {
this.$http
.get("api.org/users")
.then(res => {
console.log(res);
this.users = res.body;
})
.catch(err => {
console.error(err);
});
}
报错如下：
Access to XMLHttpRequest at 'http://api.org/users' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
发现是跨域问题
解决方法
- 配置文件
创建配置文件vue.config.js,与package.json同级 - 安装代理
现在vue cli3默认是没有devServer的，需要手动安装
$ npm install --save-dev http-proxy-middleware
- 写入配置
module.exports = {
devServer: {
proxy: {
//配置跨域
'/api': {
target: "http://api.org",
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
}
}
这里要把请求路径该一下：
.get("api.org/users")
改成:
.get("api/users")
注意问题
如果你是用tp写的接口
把 app.config里的 app_debug = true 改为 false
linux下
runtime 权限改为777
$ sudo chmod 777 runtime
否则请求的时候会有服务器500错误
参考文献
https://cli.vuejs.org/zh/config/#devserver-proxy
https://github.com/chimurai/http-proxy-middleware#proxycontext-config
