【发布时间】: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
这是我遇到的两个条件:
- 我在
yarn serve
时使用devServer
代理请求正常,但是在我运行yarn build
并使用anywhere
运行我的dist 文件后,它显示错误。请求网址变为http://172.20.10.3:8000/api/single?xxxxxx
。 - 由于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