CORS error , even access-control-allow-origin is allowed for the domain

Question

When accessing http://localhost:8088/api/ from https://my.example.com, I have this CORS error.

Access to XMLHttpRequest at 'http://localhost:8088/api/' from origin 'https://my.example.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.

OK, It is popular error for CORS, so I checked the server setting.

curl -X POST -F file=@test_material/0_for_django_testcase.png  -F metadata='{"test":"test"}' -i localhost:8088/api/ -H "Origin: https://my.example.com

It return this header, but It looks like https://my.example.com is allowed...?

HTTP/1.1 201 Created
date: Mon, 10 Jul 2023 12:53:50 GMT
server: uvicorn
content-length: 510
content-type: application/json
access-control-allow-credentials: true
access-control-expose-headers: Content-Disposition
access-control-allow-origin: https://my.example.com
vary: Origin

If so, why does this error happen?

I tested on both Chrome and Firefox.

Any help appreciated.

Next Trial

Thanks to @jub0bs comment, I tried to check with

curl -X OPTIONS -F file=@test_material/0_for_django_testcase.png  -F metadata='{"test":"test"}' -i localhost:8088/api/ -H "Access-Control-Request-Method: POST" -H "Origin: https://my.example.com"

It returns,

date: Mon, 10 Jul 2023 14:40:27 GMT
server: uvicorn
vary: Origin
access-control-allow-methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
access-control-max-age: 600
access-control-allow-credentials: true
access-control-allow-origin: https://my.example.com
content-length: 2
content-type: text/plain; charset=utf-8

It looks like accepting OPTIONS too...

FastAPI Server setting is like this

    def add_cors_middleware(app: FastAPI):
        app.add_middleware(
            CORSMiddleware,
            allow_origins=[
                "http://localhost:8021",
                "https://my.example.com",
            ],
            allow_credentials=True,
            allow_methods=["*"],
            allow_headers=["*"],
            expose_headers=["Content-Disposition"],
        )

The error message indicates that the problem lies in the preflight response. Therefore, that `curl` command you're using to diagnose the problem should, at the very least, use the `OPTIONS` method. You should also run it with `-H "Access-Control-Request-Method: POST"`. — jub0bs, Jul 10 '23 at 13:59
Thank you for your comment, I update the article about trying to check the method with `OPTIONS` — whitebear, Jul 10 '23 at 14:44
You might find the following answers helpful: [this](https://stackoverflow.com/a/71805329/17865804), [this](https://stackoverflow.com/a/73963905/17865804), as well as [this](https://stackoverflow.com/a/75048778/17865804) and [this](https://stackoverflow.com/a/75041731/17865804) — Chris, Jul 10 '23 at 14:51
I cannot reconcile the error message with the headers present in the preflight response. There must be something you're not telling us... — jub0bs, Jul 10 '23 at 15:49
Also, `https://https://my.example.com` in your FastAPI config is incorrect. — jub0bs, Jul 10 '23 at 15:50
Thank you @Chris I read the articles, this is good study for me. — whitebear, Jul 11 '23 at 02:30
@job0bs Thank you for your help. I finally found out this is related with chrome cache. I use secret mode, it works without error, in normal browser mode it shows error. — whitebear, Jul 11 '23 at 02:31

score 0 · Answer 1 · answered Jul 10 '23 at 13:03

0

replace this header's value access-control-allow-origin: https://my.example.com from django server and add localhost:your_server_port_where_server_is_running instead of your website link

answered Jul 10 '23 at 13:03

Zaman Rajpoot

326
2
5

This api server running on port:8088 is in container-A and `reactjs` and `django` running on port:8021 is in container-B, in this case, `access-control-allow-origin` should be `http://localhosg:8021`? Browser doesn't know this is on localhost:8021 – whitebear Jul 10 '23 at 13:15
I added 'http://localhost:8021', but in vain.... – whitebear Jul 10 '23 at 15:43
http://localhost:8088 Try to add this and try to add multiple origins may cause you to get rid of your error – Zaman Rajpoot Jul 10 '23 at 17:41
another possible solution is to disable cors from your api call – Zaman Rajpoot Jul 10 '23 at 17:43

score 0 · Answer 2 · answered Jul 11 '23 at 03:19

0

We had this issue with one of our nodejs expressjs code

for OPTIONS alone you write a response with 200 in your application side

Which means, when OPTIONS coming as part the request your server side code will simply return

HTTP 200 OK

answered Jul 11 '23 at 03:19

Dickens A S

3,824
2
22
45

CORS error , even access-control-allow-origin is allowed for the domain

2 Answers2