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

Question

我有一个在 http://localhost:8080 上以开发模式运行的 VueCLI 前端应用程序。我试图调用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}`)
    },
}

标签： vue.jswebpackproxyaxiosvue-cli-3

Answer 1

由于您已经代理了 API 服务，因此您的 VUE_APP_DATA_SERVICE_URL 应该设置为您的 Vue 服务器：

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