CORS ERRORI 我的项目中存在问题，我理解这个错误，并且我试图找到答案，但到目前为止还没有运气。这是我的情况：我有 nuxt 3 应用程序，我在其中嵌入了其中一个......

CORS 错误

我的项目中遇到了一个问题，我了解错误，并尝试寻找答案，但到目前为止还没有成功。

以下是我的情况：

• 我有 nuxt 3 应用程序，其中嵌入了一个 vue 组件。
• 该组件是一个聊天机器人，用户可以向其提出一些问题。
• 我无法控制或无法访问该方法或 API 调用以获取聊天响应，这导致我出错，因为该 api 调用来源不同。

我该如何解决这个 cors 错误？

我的应用程序正在运行 localhost:3000 ，并且该组件发出的请求 https://part1.part2.part3.origin.com/log 类似于 https://part1.part2.part3.origin.com/api/chat

不确定是否需要以下代码

文件 nuxt.config.js 中有这个配置

vite: {
    server: {
      proxy: {
        '/APPWEB/': {
          target: 'http://localhost',
          changeOrigin: true,
          secure: false
        },
        '/APPWEB/Lib/': {
          target: 'http://localhost',
          changeOrigin: true,
          secure: false
        }
      }
    }
}

我的组件.vue

<template>
    <div>
        <component
          :is="myCMP"
          v-if="myCMP"
          user-type="external"
          env="stg" />
    </div>
  </template>
  <script setup>
  import corsImport from "package-name-import";
  const myCMP = shallowRef(null)
  async function loadComponent() {
    const targetComponent = './component-embedded-vue3'
    const envRemoteEntryMap = {
      dev: 'https://a.b.c.com/mf/remoteEntry.js',
      stg: 'https://a.b.c.com/mf/remoteEntry.js',
      prod: 'https://a.b.c.com/mf/remoteEntry.js'
    }
    if (import.meta.client) {
      try {
        await corsImport(
          /* webpackIgnore: true */
          envRemoteEntryMap.stg
        )
        const myComponent = (await window.myCMP.get(targetComponent))().default
        return myComponent
      } catch (error) {
        console.log(error)
      }
    }
  }
  onMounted(async () => {
    myCMP.value = await loadComponent()
  })
  </script>
  

我的后端在本地主机上运行。

上述代理代码的作用是，对于端点 /APPWEB/ ， /APPWEN/Lib/ 它将那些请求重定向到本地主机。

我的 Nuxt 项目文件夹 server 中没有任何内容

更多解释

• p13

• p14

• 第15页

• p16

• p17

• p18

错误信息：

CORS 策略已阻止从源“http://localhost:3000”访问“https://abc.efg.haj.company.com”获取数据：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

• 我无法进行以下更改，因为我无法控制进行 API 调用的组件。

fetch('/api/country-check')
  .then(response => response.json())
  .then(data => console.log(data));

请指导我如何解决这个问题，如果需要，请更新问题标题。

错误截图