带有Axios的Vue CLI 3-代理服务器不工作

Question

我有一个VueCLI前端应用程序运行在http://localhost:8080 在开发模式中。我试图调用由提供的api服务http://localhost:36856，因此会出现CORS问题。然后，我在vue中设置代理服务器配置。配置。但是它不起作用。下面是一些代码。。。

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:36856',
  }
}

我在A中创建了一个带有自定义配置的axios新实例pi.js

// 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}`)
    },
}

Answer 1

由于您已经代理了API服务，您的VUE_应用程序_数据_服务_URL应设置为您的VUE服务器：

// .env.development
VUE_APP_DATA_SERVICE_URL = http://localhost:8080