登录
原创

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

发布于 2022-04-11 阅读 1075
  • 前端
  • Vue.js
原创

开发时,如果 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 跨域资源共享

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报