我有一个 VueCLI 前端应用程序在开发模式下在 http://localhost:8080 上运行。我尝试调用http://localhost:36856提供的api服务,所以会出现CORS问题。然后我在 vue.config.js 中设置代理服务器配置,但它不起作用。下面是一些代码...
// vue.config.js
module.exports = {
devServer: {
proxy: 'http://localhost:36856',
}
}
我在 Api.js 中使用自定义配置创建了一个新的 axios 实例
// Api.js
import axios from 'axios'
export default (baseURL = process.env.VUE_APP_DATA_SERVICE_URL) => {
return axios.create({
baseURL: baseURL,
withCredentials: false,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
}
// .env.development
VUE_APP_DATA_SERVICE_URL=http://localhost:36856
这是我如何构建可供调用的 api 服务的示例
// UserService.js
import apiClient from './Api'
export default {
getUser (initial) {
return apiClient().get(`/api/users/${initial}`)
},
}
最佳答案
由于您已经代理了 API 服务,因此您的 VUE_APP_DATA_SERVICE_URL 应设置为您的 Vue 服务器:
// .env.development
VUE_APP_DATA_SERVICE_URL = http://localhost:8080
关于vue.js - Vue CLI 3 与 Axios - 代理服务器无法工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62510396/