vue cli4 跨域问题

环境:

  • 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中获取到想要的数据

阅读 2.4k
评论
    3 个回答
    • 242

    本地开发启用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进行跨域设置

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

        • 12.1k

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

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

          撰写回答

          登录后参与交流、获取后续更新提醒