由于Cors策略,Svelte前端无法向nest客户端发出请求



我遇到了一个sveltejs问题。我正试图使一个非常简单的前端服务器与苗条弄清楚,如果我的后端在巢流是ok的。

长话短说,如果用户成功连接,后端调用oauth来处理授权,并返回一个会话cookie。

对于失眠,邮差,甚至firefox或chrome,当我直接调用后端时,oauth流工作得非常好。

但是当我想从sveltejs前端做这个简单的调用时,困难开始出现了。我想我真的不明白我怎么能做到这一点与苗条。

login.svelte":

<script lang="ts">
import axios from 'axios';
import {push} from 'svelte-spa-router';
$: submit = async() => {
console.log("submit");
const {data} = await axios.get('http://transcendance:8080/api/v2/auth',
{
withCredentials: true,
}
);
if (data.status === "ok") {
push('/');
}
}
</script>
<body>
<main class="form-signin w-100 m-auto">
<button on:click={submit} class="w-100 btn btn-lg btn-primary" type="submit">
Connexion
</button>
</main>
</body>

nestjs和svelte服务器被dockerized。为了使事情更简单,我使用nginx作为反向代理-也dockerized -来处理请求并将它们分发到前端或后端服务器。

主要问题是没有对oauth连接的页面进行重定向,并且由于cors策略而阻止请求。但是由于nginx,每个调用都来自同一个域,即使我在nestjs中更改了cors策略,也没有任何效果。

我认为这是"42"api"我不太理解Xhr请求,但即使用不同的方式,比如fetch(实际上什么都不取)也行不通。

我想我不明白如何与苗条做这样的事情。如果有人能给我点什么,给一个想法,我将不胜感激。谢谢!

$: submit = () => {
window.location.href = 'http://transcendance:8080/api/v2/auth';
}

鼓掌、鼓掌。

键入run on Windows搜索并粘贴以下代码-Chrome .exe——user-data-dir="C://Chrome dev session"——disable-web-security它将打开新的chrome,其中CORS错误将被禁用,这是开发目的的临时解决方案。

查找附加图像以获取更多细节

https://i.stack.imgur.com/whXvP.png

最新更新