VUE JS 3 中从本地主机到第三方 API 的 API 调用存在 Cors 问题

Question

我已经面临CORS问题表格很多天了。我已经应用了 Stack Overflow 中提供的所有解决方案，但对我没有任何帮助。谁能告诉我我的代码出了什么问题？我正在使用 VUE JS 3，其中我使用托管在不同服务器上的 API。我尝试了所有可以修复的标题，但没有任何对我有帮助。

环境网址

 VITE_APP_API_URL="http://localhost:5173" 

vue.config.js：文件放置在根文件夹中。

module.exports = {
     devServer: {
            proxy: 'https://ded.austory.it'
           }
    }

从这里调用API：

function login(credentials: User) {
     // ApiService.setCrossHeaders();
    return ApiService.post("/login", credentials)
      .then(({ data }) => {
        setAuth(data);
      })
      .catch(({ response }) => {
        setError(response.data.errors);
      });
  }

定义API服务：

 .......
import type { AxiosResponse } from "axios";
import axios from "axios";
import VueAxios from "vue-axios";
  .....

/**
   * @description set the POST HTTP request
   * @param resource: string
   * @param params: AxiosRequestConfig
   * @returns Promise<AxiosResponse>
   */
  public static post(resource: string, params: any): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.post(`${resource}`, params);
  }

上面的代码负责进行API调用。所以我不知道出了什么问题。输出是

如果我在 env 中设置： VITE_APP_API_URL="https://ded.austory.it" （真实站点名称不能在这里分享。）然后

但是这里有一个问题，在设置 ENV URL 时

   VITE_APP_API_URL="https://preview.keenthemes.com/metronic8/laravel/api" 

此后，本地主机不再出现 Cors 错误。我怎么不知道？我检查了我的项目，项目中没有此 URL 的其他定义。 hHw 它接受但我不接受？

Answer 1

问题已被目标服务器（目标服务器）修复。我与我公司的网络团队讨论了这个问题。他们更新了服务器配置。这样之后，任何主机都可以发送请求从 API 获取数据。

详细来说，我想说的是，我的项目位于 abc.com 服务器上，我正在从 xyz.com 服务器请求数据。两个主机都是我们公司的。这样他们就允许我向 xyz.com 请求 abc.com。我们正在使用 xyz.com 的服务。所以更新后这个问题就解决了。

另一件事是我的前端 UI 是 Vue JS，其中部分使用了 vite。因此，对于代理，我在 vue.config.js 中编写可能在 vite.config.js 上编写的代码。我可以检查这一点，因为由于服务器更改。我无法检查它。因此，如果您正在寻找我的解决方案，请确保您使用的是正确的配置文件。

对于 vite.config.js 我们可以使用代理...更多详细信息：访问 vite doc

.....
server: {
        proxy: {
            '/foo': 'http://localhost:4567',
            '/api': {
                target: 'http://jsonplaceholder.typicode.com',
                changeOrigin: true,
                secure: false,
            },
        },
    },
.....