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 !
$: submit = () => {
window.location.href = 'http://transcendance:8080/api/v2/auth';
}
Clap, clap.