vue2-开发环境CORS跨域问题解决(配置代理proxy)
开发时,如果 API接口没有开启CORS跨域资源共享,前端请求接口地址时就会报错,解决方法:配置 proxy 代理
·
开发时,如果 API接口没有开启CORS跨域资源共享,前端请求接口地址时就会报错,
解决方法:配置 proxy 代理
vue2 配置代理方法示例:
前提 :安装了 axios
main.js 文件中设置基础访问路径:
import axios from 'axios'
// 设置 访问 地址基础路径
// axios.defaults.baseURL = "https://www.escook.cn" ,将原来的路径换成本地地址
axios.defaults.baseURL = "http://localhost:8080"
Vue.prototype.$http = axios
在项目根目录 创建 vue.config.js 文件,添加如下代码:
module.exports = {
devServer: {
// 设置代理
proxy: 'https://www.escook.cn',
}
}
vue 文件中再次请求 接口就可以成功了:
<script>
export default {
name: "MyApp",
methods: {
async getUserInfo() {
const { data: res } = await this.$http.get('/api/users')
console.log(res);
}
}
};
</script>
注意:开发时设置代理可以解决 CORS 问题,但是正式上线时,还是要开启 API 的 CORS 跨域资源共享
更多推荐
已为社区贡献10条内容
所有评论(0)