vue2-开发环境CORS跨域问题解决(配置代理proxy)

零OO

已于 2023-11-27 14:26:28 修改

阅读量4k

点赞数 2

分类专栏：前端文章标签：前端 vue proxy

于 2022-04-15 14:56:28 首次发布

本文链接：https://blog.csdn.net/qq_39111074/article/details/124194964

版权

前端专栏收录该内容

229 篇文章

订阅专栏

当API接口未开启CORS时，前端请求会遇到跨域问题。为解决此问题，可以在Vue项目中配置proxy代理。首先在main.js中设置axios的基础访问路径为本地地址，然后在vue.config.js中添加代理配置，将目标API地址设为代理。这样开发期间可以规避跨域限制，但线上部署时仍需确保API支持CORS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发时，如果 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>