解决 Nuxt 3 的 cors 错误，用于项目中的嵌入式应用发出请求
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));
请指导我如何解决这个问题，如果需要，请更新问题标题。
错误截图
-
引用 2楼 -
我想为我的 VueJS-Component 分配一个引用：
我想为我的 VueJS-Component 分配一个引用：
<audio ref="audioPlayer" controls controlsList="nodownload" preload="metadata" > <source :src="audioUrl" /> </audio>在设置功能中，我这样做
const audioPlayer = ref<HTMLElement|null>(null)不幸的是，里面
onMounted仍然是NULL。即使我使用nextTick，它也没有被分配。使用500毫秒或更长的setTimeout，它将被赋值。因此我调用了 setInterval 来查看这个引用变量随时间如何变化：
setInterval(() => { console.log("Audio-Ref:", audioPlayer.value); }, 1000);结果很奇怪：有时它会呈现元素，有时只呈现 NULL：
怎么会这样？
-
-
引用 5楼 -
引用 6楼 -
引用 7楼