Fixing Common Problems with CORS and JavaScript

Developer Blog Comments
1

Fixing Common Problems with CORS and JavaScript

Tutorial: This post walks through troubleshooting and fixing common problems associated with calling REST APIs from JavaScript.

2

Mohammad Nawazish Khan

Very strange, but I have the necessary header set in on my server resource for my client, yet I am getting the same issue:

has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Any suggestions?

3

Brian Demers

Which step are you seeing this in? There are a couple places in the post where this is expected.
Try opening a new private/incognito window too, and giving it another try.

4

Mohammad Nawazish Khan

Apologies for confusing you, I am not getting the error from the example in this post, it is in my personal work. The setup is a very simple react app with a backend in Golang. Although the resource is sending the required CORS header(s) yet, I am getting the issue. The preflight call from google chrome is passing with a 200 OK, however, the actual call is failing with a CORS error. Interestingly, even after this error, the call reaches the backend! Any suggestions?

5

Brian Demers

Your best bet might be to create an issue on StackOverflow.
If the problem is related to CORS configuration with Okta, probably use the Okta Developer Forum.

In either case, try to include a simple working sample on GitHub (or similar), and add a link back here, maybe we can help answer it too!

6

Mohammad Nawazish Khan

Thanks for the note; the code is already on github:

Server: https://github.com/nawazish…
Client: https://github.com/nawazish…

The setup is very straightforward, just fake a response for GET /question/:date and you would be able to see the error in the subsequent POST /opinion call.

I would eventually ask this question on stackoverflow as well.

7

Pronatec Eepadm

Tudo isso pra esse errinho

8

uapsa ust

I have the same problem as well but mine is weird. Take a look at my problem. but beforehand, I’ll I am using a a api in angular frontend called photosphere viewer js to view the said images in 360 degrees.

As you can see, If I call the images without the said photosphere api, it loads
https://uploads.disquscdn.c…

Now for the next screenshot to be seen below, when I use my photosphere viewer to view a specific image. the error “has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”
https://uploads.disquscdn.c…
but the request status seems ok, i just noticed that the access-control-allow-origin is missing from the headers

Can anyone help?

9

Brian Demers

Can you configure CORS for the other service <a href="http://arkoust-uapsa.xyz" rel="nofollow noopener" title="arkoust-uapsa.xyz">arkoust-uapsa.xyz</a>?