Question 97341 in Nginx Question posted in
The official documentation can be found here.

Svelte frontend fails to make request to a nestjs banckend due to Cors Policy – Nginx

I’m facing a problem with sveltejs. I’m trying to make a really simple frontend server with svelte to figure out if the flow of my backend in nest is ok.

Long story short, the backend make an oauth call to handle authorization and return a session cookie if the user successfully connected.

With insombnia, or postman, even with firefox or chrome, the oauth flow works perfectly fine when I directly call the backend.

But when I want to do this simple call from a sveltejs frontend, the difficulties start to come. I think I don’t get really how I can do this with svelte.

Svelte code for "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>

The nestjs and svelte server are dockerized. To make things simpler, I’m using a nginx as a reverse proxy – dockerized too – to handle the requests and dispatch them to the front or back end server.

The main problem is that no redirection are performed to the page for the oauth connection, and the requests are blocked due to cors policy. But every call come from the same domain thanks to nginx, and even if I change the cors policy in nestjs, nothing works.

I think that the oauth for the "42 api" don’t really understand Xhr requests, but even with a different way, like fetch (to actually fetch nothing) does’nt work.

I think I don’t understand how to do such a thing with svelte. If someone can point me something, give an idea, It would be much appreciated. Thanks !

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    $: submit = () => {
        window.location.href = 'http://transcendance:8080/api/v2/auth';
    }

    Clap, clap.


  2. 0

    type run on windows search and paste the following code –
    chrome.exe –user-data-dir="C://Chrome dev session" –disable-web-security
    it will open new chrome, where the CORS errors will be disabled, and it is temporary solution for development purpose.

    find attached image for more detail

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search