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));
请指导我如何解决这个问题,如果需要,请更新问题标题。
错误截图
我正在尝试创建一个透明的 v-app-bar,它最初是透明的,但随着我滚动,它会过渡到彩色。有一篇类似的帖子使用 options api 和 window.onscroll 安装为
我正在尝试创建一个透明的 v-app-bar,它最初是透明的,但随着滚动过渡到彩色。有一篇类似的帖子使用选项 api 和 window.onscroll 安装,如下所示:
如何在 Vuetify 中使 Appbar 背景颜色透明
然而,
我正在尝试使用 Composition API 和计算属性,因为这看起来更简洁。我还为隐藏事件使用了滚动阈值,因此它与这个问题略有不同,因为我需要它们一起发生。我的问题是我的代码出错并显示“无法读取未定义的属性(读取‘body’)”
<template>
<div>
<v-app-bar v-if="$vuetify.display.mdAndUp" class="px-md-4" :color="navBar.secondaryNavColor" scroll-behavior="hide" scroll-threshold="100" height="40" flat>
<template #prepend>
<v-btn color="primary" icon="mdi-facebook" variant="plain"/>
<v-btn color="primary" icon="mdi-instagram" variant="plain"/>
</template>
<template #append>
<v-btn class="ms-1 mx-5" color="primary" variant="plain" prepend-icon="mdi-account" rounded>Login</v-btn>
<v-btn class="ms-1" color="primary" variant="plain" prepend-icon="mdi-upload" rounded>File Upload</v-btn>
</template>
</v-app-bar>
<v-app-bar :elevation="5" class="px-md-4" :color="navBar.primaryNavColor" scroll-behavior="hide" scroll-threshold="100" height="100" flat>
<template #prepend>
<v-app-bar-nav-icon
v-if="$vuetify.display.smAndDown"
@click="drawer = !drawer"
/>
</template>
<v-spacer v-if="$vuetify.display.smAndDown"/>
<v-img
class="me-sm-8"
max-width="240"
min-width="200"
src="/img/logo-header.png"
/>
<v-spacer />
<template v-if="$vuetify.display.mdAndUp">
<v-btn
v-for="(item, i) in items"
:key="i"
:active="i === 0"
color="primary"
class="me-2 text-none"
v-bind="item"
size="large"
rounded
/>
</template>
</v-app-bar>
<!-- <v-navigation-drawer
v-if="$vuetify.display.smAndDown"
v-model="drawer"
location="top"
temporary
width="355"
>
<v-list class="py-0" slim>
<v-list-item link prepend-icon="mdi-home-outline" title="Dashboard" />
<v-list-group
prepend-icon="mdi-account-multiple-outline"
title="Customers"
>
<template #activator="{ props: activatorProps }">
<v-list-item v-bind="activatorProps" />
</template>
<v-list-item
link
prepend-icon="mdi-account-plus-outline"
title="Create New"
/>
<v-list-group prepend-icon="mdi-magnify" title="Search">
<template #activator="{ props: activatorProps }">
<v-list-item v-bind="activatorProps" />
</template>
<v-list-item
link
prepend-icon="mdi-account-outline"
title="By Name"
/>
<v-list-item
link
prepend-icon="mdi-email-outline"
title="By Email"
/>
<v-list-item
link
prepend-icon="mdi-phone-outline"
title="By Phone"
/>
</v-list-group>
</v-list-group>
<v-list-item link prepend-icon="mdi-calendar" title="Calendar" />
<v-list-item link prepend-icon="mdi-poll" title="Analytics" />
<v-divider />
<v-list-item link prepend-icon="mdi-inbox-outline" title="Inbox" />
<v-list-item
link
prepend-icon="mdi-bell-outline"
title="Notifications"
/>
<v-divider />
<v-list-item
lines="two"
link
prepend-avatar="https://vuetifyjs.b-cdn.net/docs/images/avatars/planetary-subscriber.png"
subtitle="Vuetify Engineer"
title="John Leider"
/>
</v-list>
</v-navigation-drawer> -->
</div>
</template>
<script setup lang="ts">
import { shallowRef, computed } from 'vue'
const drawer = shallowRef(false)
interface NavigationBarData {
secondaryNavColor: string;
primaryNavColor: string;
}
const navBar = computed<NavigationBarData>(
() => {
if (document.body.scrollTop < 100 || document.documentElement.scrollTop < 100) {
return {
secondaryNavColor: 'transparent',
primaryNavColor: 'transparent',
}
} else {
return {
secondaryNavColor: 'gray-lighten-3',
primaryNavColor: 'surface',
}
}
}
)
const items = [
{
text: 'Home',
},
{
text: 'About',
},
{
text: 'Services',
},
{
text: 'Resources',
},
{
text: 'Blog',
},
{
text: 'Contact',
}
]
</script>