【问题标题】:Axios request cross-origin error with vueaxios使用vue请求跨域错误
【发布时间】:2023-10-16 07:11:01
【问题描述】:

我用谷歌翻译界面测试。(https://translate.google.cn/translate_a/xxxxx) 我正在使用 axios 来请求数据。 我的 vue.config.js 在这里:

devServer: {
  proxy: {
    '/api': {
      target: 'https://translate.google.cn/translate_a',
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

我的请求代码在这里:

this.$axios.get(url, {
  mode: 'no-cors',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  },
  credentials: 'same-origin'
})

而且我还在 main.js 中设置(我使用的是 Vue.js)

import axios from 'axios'

axios.defaults.baseURL = '/api'
Vue.prototype.$axios = axios

这是我遇到的两个条件:

  1. 我在yarn serve 时使用devServer 代理请求正常,但是在我运行yarn build 并使用anywhere 运行我的dist 文件后,它显示错误。请求网址变为http://172.20.10.3:8000/api/single?xxxxxx
  2. 由于1,我手动将请求url设置为https://translate.google.cn/translate_a/single/xxxxxx,但是在dev和prod模式下都会导致CORS错误。

没找到解决这个问题的好办法,是webpack还是vue还是axios的问题?或者是否有任何后端设置允许您向 devServer 请求,但捆绑后无法使用?

【问题讨论】:

    标签: vue.js webpack axios cors webpack-dev-server


    【解决方案1】:

    当您的后端和前端在不同的端口(或容器等)上运行时,devServer 仅用于本地开发。 devServer 只是在本地帮助您避免 CORS 问题。

    浏览器正在停止对其他域的请求。 请阅读一些关于 CORS 和 Access-Control-Allow-Origin 的文档。

    【讨论】:

    • 我可以在生产环境中请求 devServer 吗?