CORS error accessing stripe embedded form?

Hosting Support
1

Website URL

https://www.kattotes.infinityfreeapp.com/

Error Message

Whilst proceeding to my checkout page where I load my stripe form on some browsers it throws up this error

Access to fetch at ‘checkout php url’ from origin ‘main url’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Other Information

Works perfectly locally, and on firefox based browsers, and even a chromium one considering ARC is chromium under the hood, but on Edge, Safari (and mobile browsers although i can’t confirm this is entirely the same error there since I don’t have web dev tools on my phone’s browser) it throws up that error, I have the PHP Access-Control-Allow-Origin, Methods and headers respectively done.

Is this some limitation of my account hosting? or is there anything I might’ve missed?

Thanks in advance

2

Could be this, I’m not entirely sure how you have Stripe setup

Also, edge is chromium

2 Likes
3

The checkout form seems to be working fine from here.

Also, I don’t think you’d need any CORS stuff on our end for this. I’ve never used Stripe myself, but a “Stripe embedded form” suggests that Stripe is embedded on our website, not the other way around. And when Stripe is embedded in your website, then the CORS headers need to be configured with Stripe to allow access from your website, not the other way around.

I do see one CORS error in my browser logs, which is caused by the Google Maps widget. But like with with Stripe widget, that means Google Maps needs to return the right headers for your website, which you cannot fix with CORS headers on your website.

4 Likes
4

exactly, i dont see why its making a fuss, it works on some of my browsers on others its having weird outputs, not consistent at all…

I have the PHP access bs:


header("Access-Control-Allow-Origin: https://www.kattotes.infinityfreeapp.com");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

// Handle preflight OPTIONS request
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200); // TODO swap to 200 check
    exit;
}

Yet edge keeps spewing on about CORS
Safari is doing its own thing

But on Firefox, all fine and dandy…

5

Just an embedded form, its just me making a request to their API with the product data and what not and them replying with their own code thats read on a JS file to “attach” the form to my page.

Yes I’m aware its chromium hence why im using it to debug this whole mess

6

Again, if you are trying to embed resources from Stripe in your website with us, and you get CORS errors, that means the resources from Stripe do not have the necessary headers to allow them to be embedded in your site.

You can’t fix that with code on your end. Only Stripe can control where Stripe’s assets can be embedded. And if that doesn’t work, only Stripe can help you.

Any CORS headers sent from your own website would only affect the abilities for other websites to embed things from your website. You can’t sent headers that will let you embed assets from Stripe if Stripe doesn’t want you to.

In your original message, you showed an error message, but with some placeholder URLs. Could you please share the message again but this time share the exact error message as you see it? You can wrap it in a code blocks to avoid hitting the URL-per-post limit.

3 Likes
7

Yeah I’d assume so, I double checked with them that they have the correct URL, and they assured me they did.

My thoughts exactly, I set mine up well enough for safety so that’s about all I can do, I’ll wait on their support ig

Thanks for the explanation

Here’s the error message

Access to fetch at 'https://www.kattotes.infinityfreeapp.com/stripe/checkout.php' from origin 'https://kattotes.infinityfreeapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I tried swapping the fetch API by good old AJAX POST call but ended up at the same “brick” wall, Locally everything works fine on every browser in every config, however as soon as I point it to the hosted version of the code it bricks.

8

According to the error message, you are mixing up the www and non-www versions of your site. While making the request, can you remove www from the url in code? You have to either use www or non-www everywere, or it will mix up things and cause CORS error.

4 Likes
9

I LOVE YOU.

this is hella weird considering on stripes dashboard i set it to the www. variant
my JS code had www. and my cors acceptance everywhere had www. version

I assume its because the url link gets cleaned with my htaccess to not be https://www. and the website send the request from a non www. to the www. and it bricks even though everywhere its accepted as www. as well.

swapped the JS variant to the non www. and it worked.

regardless thank you so much.

Still perplexed as to why it was requesting from

1 Like
10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.