Next.js Discord

Discord Forum

Cross-origin error when using fetch

Unanswered
Elm sawfly posted this in #help-forum
Open in Discord
Elm sawflyOP
i use nextjs as my front and nestjs for my api,
my api have a route that simply redirect to google
-
res.redirect(303, 'https://google.com');


My issue is on my front when i do a form with a proxy on package JSON :
   <form action="/create-checkout-session" method="POST">
      {/* Add a hidden field with the lookup_key of your Price */}
      <input type="hidden" name="lookup_key" value="Basic" />
      <button id="checkout-and-portal-button" type="submit">
        Checkout
      </button>
    </form>

my redirect work perfectly but when i us fetch() like that :
  <form onSubmit={async (event) => {
  event.preventDefault();
  const form = event.currentTarget;
  const formData = new FormData(form);
  const lookupKey = formData.get("lookup_key");
  
  try {  
    const res = await fetch(`/create-checkout-session`, {
      method: "POST",
      mode: "cors",
      headers: {
        accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded",       
        "Access-Control-Allow-Origin": "*", 
      },
      body: JSON.stringify({ lookupKey }),    
    });
  
    
  } catch (error) {
    console.error("Failed to create checkout session", error);
  }
}}>
  <input type="hidden" name="lookup_key" value="Basic" />
  <button
    className="w-full px-4 py-2 mt-8 text-center text-white bg-orange font-title"
    id="checkout-and-portal-button"
    type="submit"
  >
    Buy now
  </button>
</form>
`
I get the following error :
- Blocking a multi-origin request (Cross-Origin Request): the “Same Origin” policy does not allow you to consult the remote resource located on https://google.com/. Reason: The CORS header "Access-Control-Allow-Origin" is missing.

- Blocking a multi-origin request (Cross-Origin Request): the “Same Origin” policy does not allow you to consult the remote resource located on https://google.com/. Reason: CORS request failed.

Can anyone know how to resolve that ?

15 Replies

@Elm sawfly i use nextjs as my front and nestjs for my api, my api have a route that simply redirect to google -res.redirect(303, 'https://google.com'); My issue is on my front when i do a form with a proxy on package JSON : <form action="/create-checkout-session" method="POST"> {/* Add a hidden field with the lookup_key of your Price */} <input type="hidden" name="lookup_key" value="Basic" /> <button id="checkout-and-portal-button" type="submit"> Checkout </button> </form> my redirect work perfectly but when i us fetch() like that : <form onSubmit={async (event) => { event.preventDefault(); const form = event.currentTarget; const formData = new FormData(form); const lookupKey = formData.get("lookup_key"); try { const res = await fetch(`/create-checkout-session`, { method: "POST", mode: "cors", headers: { accept: "application/json", "Content-Type": "application/x-www-form-urlencoded", "Access-Control-Allow-Origin": "*", }, body: JSON.stringify({ lookupKey }), }); } catch (error) { console.error("Failed to create checkout session", error); } }}> <input type="hidden" name="lookup_key" value="Basic" /> <button className="w-full px-4 py-2 mt-8 text-center text-white bg-orange font-title" id="checkout-and-portal-button" type="submit" > Buy now </button> </form>` I get the following error : - Blocking a multi-origin request (Cross-Origin Request): the “Same Origin” policy does not allow you to consult the remote resource located on https://google.com/. Reason: The CORS header "Access-Control-Allow-Origin" is missing. - Blocking a multi-origin request (Cross-Origin Request): the “Same Origin” policy does not allow you to consult the remote resource located on https://google.com/. Reason: CORS request failed. Can anyone know how to resolve that ?
Ray
hi try to handle the redirect manually like this
const router = useRouter()

<form onSubmit={async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    const formData = new FormData(form);
    const lookupKey = formData.get("lookup_key");

    try {  
      const res = await fetch(`/create-checkout-session`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",      
        },
        body: JSON.stringify({ lookupKey }),
        redirect: 'manual'
      });
      if (res.type === "opaqueredirect") {
        router.push(res.url);
      }
      
    } catch (error) {
      console.error("Failed to create checkout session", error);
    }
  }}>
    <input type="hidden" name="lookup_key" value="Basic" />
    <button
      className="w-full px-4 py-2 mt-8 text-center text-white bg-orange font-title"
      id="checkout-and-portal-button"
      type="submit"
    >
      Buy now
    </button>
  </form>
@Elm sawfly Doesnt work too, and i prefere to do it without use router, i really don't understand cors...
Ray
In this case, you would need to use form action if you don't want to use router
Elm sawflyOP
like i can do the same like form action with fetch()?
Ray
no
Ray
sorry I don't understand that language
@Ray sorry I don't understand that language
Elm sawflyOP
Sorry, I forgot to speak English, I retried your first solution and found the problem and the fetch response does contain the url parameter but it is the url of my api route and not the url returned by this route
Elm sawflyOP
response
Response { type: "opaqueredirect", url: "http://localhost:8080/api/stripe-paiement/create-checkout-session", redirected: false, status: 0, ok: false, statusText: "", headers: Headers(0), body: null, bodyUsed: false }

and my api normaly redirect to google.com
I think your api should return the stripe url?
Elm sawflyOP
for test, normally it redirect to checkout portal frome stripe
i got the same error when i redirect to stripe url
Ray
return the url in a json object from your api