由于 Cors 策略，Svelte 前端无法向 nestjs 后端发出请求答案

【问题标题】：Svelte frontend fails to make request to a nestjs banckend due to Cors Policy由于 Cors 策略，Svelte 前端无法向 nestjs 后端发出请求
【发布时间】：2023-02-02 00:27:21
【问题描述】：

我正面临 sveltejs 的问题。我正在尝试使用 svelte 制作一个非常简单的前端服务器，以确定我的后端在 nest 中的流程是否正常。

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

对于 insombnia 或 postman，即使使用 firefox 或 chrome，当我直接调用后端时，oauth 流程也能正常工作。

但是当我想从 sveltejs 前端进行这个简单的调用时，困难就来了。我想我真的不明白如何用 svelte 做到这一点。

“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”的 oauth 并不真正理解 Xhr 请求，但即使使用不同的方式，如获取（实际上什么也不获取）也不起作用。

我想我不明白如何用 svelte 做这样的事情。如果有人能指出我一些东西，给出一个想法，将不胜感激。谢谢！

【问题讨论】：

标签： oauth nestjs svelte

【解决方案1】：

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

鼓掌。

【讨论】：

【解决方案2】：

在 Windows 搜索中键入运行并粘贴以下代码 - chrome.exe --user-data-dir="C://Chrome 开发会话" --disable-web-security 它将打开新的 chrome，其中 CORS 错误将被禁用，并且它是用于开发目的的临时解决方案。

查找附加图片以获取更多详细信息

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

【讨论】：

您好，感谢您的回答！我不认为禁用 cors 策略而不是找出问题所在是个好主意。我找到了解决问题的方法。再次感谢！

【解决方案3】：

我会试试这个！你在哪里找到 window.location.href ？你在window.location.href之后使用axios吗

【讨论】：