利用 Vue 的反向代理来解决 Axios 的 CORS 问题

问题

当在开发环境开发的时候,使用 axios 来向后端的 API 发送求情,
但是会被 Policy 绊住, 就是常见的 CORS 问题.

1
Access to XMLHttpRequest at 'http://localhost:3000/api/test' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

因为 Origin 不同所以浏览器会将请求拒绝.

1
2
3
(example)Origin不同
Vue.js:http://localhost:8080
Golang:http://localhost:3000

解决方法

1.叫服务器端设定 CORS

2.前端的 Vue 使用 proxy 来回避此问题

  1. 在 Vue 的根目录下生成 vue.config.js 文件

vue.config.js

1
2
3
4
5
6
7
8
9
module.exports = {
  devServer: {
    proxy: {
      '/api/': {
        target: 'http://localhost:3000',
      },
    },
  },
}

像下面这样写的话

1
2
3
axios.get('/api/test').then((res) => {
  console.log(res.data)
})

就可以在请求 Golang 的 API/api/**的时候, 转到http://localhost:3000,这样就可以回避同源策略了。

当然我们还可以利用环境参数来根据不同的开发环境设置不同的 proxy.

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  devServer: {
    proxy: {
      '/api/': {
        target: process.env.USE_LOCAL_SERVER
          ? 'http://localhost:3000'
          : 'http://aaa.com',
      },
    },
  },
}

如果你想要看 log 的话可以加上

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  devServer: {
    proxy: {
      '/api/': {
        target: process.env.USE_LOCAL_SERVER
          ? 'http://localhost:3000'
          : 'http://aaa.com',
        logLevel: 'debug', // 追加log
      },
    },
  },
}