如何为不同的域API设置Vue CORS？

Question

我试图部署一个Vue应用程序，它有一个单独的后端，并将托管在不同的域。例如：

1. 喵喵。猫xyz（应用程序）

现在，在npm运行build之后，我试图通过运行service-s dist在本地预览它，而应用程序正在本地主机上断开：5000。但是，问题在于它没有在当前endpoint（即本地的localhost:8000，服务器的API.meow.cat.xyz）发送API请求。我尝试了如下配置CORS

vue.config.js

module.exports = {
  devServer: {
    port: process.env.VUE_APP_DEV_PORT,
    proxy: process.env.VUE_APP_API_ROOT_PATH,
  },
};

.env.development

VUE_APP_API_ROOT_PATH = 'http://localhost:8000/api'
VUE_APP_DEV_PORT = 3000

请注意，我使用axiox。这是我的axios设置。

API. js

import axios from "axios";

const injectAccessToken = (config) => {
  const accessToken = localStorage.getItem("access_token");
  if (accessToken)
    config.headers.common["Authorization"] = `Bearer ${accessToken}`;
  return config;
};

const config = {
  baseURL: process.env.VUE_APP_API_ROOT_PATH,
};

const API = axios.create(config);

API.interceptors.request.use(injectAccessToken);

export default API;

并使用它如下

登录。vue

import API from "@/api/Api";

<script>
  const res= await API.post('login')
</script>

这个解决方案还不起作用。其发送请求位于http://localhost:5000。重点是什么？请注意，我使用的是axios。提前谢谢。

Answer 1

允许服务器（api）上的应用程序来源的COR。

这与客户端（应用程序）无关

Answer 2

允许来自服务器的CORS请求

使用Access Control Allow Origin标头，您可以指定哪些源可以使用您的API。

app.get('/api', (req, res) => {
    res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.send({
        api: "your request."
    });
})