vue2-开发环境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 跨域资源共享