Vue.js 带有Axios的Vue CLI 3-代理服务器不工作
我有一个VueCLI前端应用程序运行在http://localhost:8080 在开发模式中。我试图调用由提供的api服务http://localhost:36856,因此会出现CORS问题。然后我在vue.config.js中设置了代理服务器配置,但它不起作用。下面是一些代码Vue.js 带有Axios的Vue CLI 3-代理服务器不工作,vue.js,webpack,proxy,axios,vue-cli-3,Vue.js,Webpack,Proxy,Axios,Vue Cli 3,我有一个VueCLI前端应用程序运行在http://localhost:8080 在开发模式中。我试图调用由提供的api服务http://localhost:36856,因此会出现CORS问题。然后我在vue.config.js中设置了代理服务器配置,但它不起作用。下面是一些代码 // vue.config.js module.exports = { devServer: { proxy: 'http://localhost:36856', } } 我使用Api.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',
},
})
}
这是我如何构建一个准备好调用的api服务的示例
// UserService.js
import apiClient from './Api'
export default {
getUser (initial) {
return apiClient().get(`/api/users/${initial}`)
},
}
由于您已经代理了API服务,您的VUE_应用程序_数据_服务_URL应设置为您的VUE服务器:
// .env.development
VUE_APP_DATA_SERVICE_URL = http://localhost:8080
. 您必须在后端添加标题
// .env.development
VUE_APP_DATA_SERVICE_URL = http://localhost:8080