CORS ERRORI 我的项目中存在问题,我理解这个错误,并且我试图找到答案,但到目前为止还没有运气。这是我的情况:我有 nuxt 3 应用程序,我在其中嵌入了其中一个......
CORS 错误
我的项目中遇到了一个问题,我了解错误,并尝试寻找答案,但到目前为止还没有成功。
以下是我的情况:
我该如何解决这个 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 的情况下获取资源。
fetch('/api/country-check')
.then(response => response.json())
.then(data => console.log(data));
请指导我如何解决这个问题,如果需要,请更新问题标题。
错误截图
我想为我的 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:
怎么会这样?