vue cli4 跨域问题

Question

环境:

• mac
• vscode
• vue/cli 4.2.3

问题：

在本机开了Flask后端应用接口程序地址为:http://localhost:5000,并已经通过postman测试,可以正常访问使用。
开发前端项目，通过axios访问时，出现跨域错误，错误提示如下
Access to XMLHttpRequest at 'http://localhost:5000/user/login' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

已经配置了vue.config.js文件的代理，依然无效，代码如下:

module.exports = {
  devServer: {
    proxy: {
      '/user': {
        target: 'http://localhost:5000',
        changeOrigin: true, // 允许跨域
        pathRewrite: { // 重写路径
          '^/user': ''
        }
      }
    }
  }
}

在main.js中配置了axios的基础路径,与QS:

import qs from 'qs'

Vue.prototype.$qs = qs
axios.defaults.baseURL = 'http://localhost:5000

组件中写法如下：

login () {
      this.$refs.userref.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/user/login', this.$qs.stringify(this.user))
        console.log(res)

我的问题：

如何才能解决此问题，让我可以通过http://localhost:5000中获取到想要的数据

Answer 1

本地开发启用devServer后，接口的路径前面不需要加域名，可以改一下,这里需要区分开发环境和生产环境，生产环境的API域名可以写进环境变量里比如VUE_APP_API="http://www.abc.com", 开发环境写上/就行了，不需要写域名，不然devServer是不会被调用的。

import qs from 'qs'

Vue.prototype.$qs = qs
const apiHost = process.env.NODE_ENV === 'development' ? '/' : process.env.VUE_APP_API
axios.defaults.baseURL =  apiHost

至于在服务端加跨域请求头，一般来说，只兼容生产环境就行了，开发环境完全可以用devServer进行跨域设置

Answer 2

在服务端设置请求头属性Access-Control-Allow-Origin

Answer 3

代理的意思，就是访问 /api 等效于访问 http://localhost:5000/api，所以启动 devServer 之后就不要再配置 baseURL 了。

另外，如果你将来还要部署，可以保留 baseURL 配置，但是使用环境变量区分开发环境与生产环境。