CORSMiddleware not work

[LYH8112]

Hi,
I searched the FastAPI documentation( https://fastapi.tiangolo.com/tutorial/cors/). But get errors:
Access to XMLHttpRequest at "http://127.0.0.1:8086/api" from origin "http://www.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 requeste resource.

"http://127.0.0.1:8086/api" and "http://www.example.com" are in same pc.

from fastapi import FastAPI
from starlette.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=[""],
allow_credentials=True,
allow_methods=[""],
allow_headers=["*"],
)

[phy25]

How do you make the request? Could you use the web devtools to see how the request look like (with HTTP headers)?

Also you may want to follow the issue template.

[LYH8112]

How do you make the request? Could you use the web devtools to see how the request look like (with HTTP headers)?

Also you may want to follow the issue template.

var apiUrl = "http://127.0.0.1:8086/api";
var data-from = { };
$.ajax({
url: apiUrl,
type: 'POST',
data: JSON.stringify(data-from),
contentType: 'application/json;charset=utf-8',
dataType: 'json',
cache: false,
crossDomain: true,
async: true,
success: function (data) {
alert(JSON.stringify(data));
},
error: function (data, err) {
alert("fail " + JSON.stringify(data) + " " + JSON.stringify(err));
}
});

Client:
Accept: /
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST

Response:
HTTP/1.1 502 Fiddler

[SnkSynthesis]

You should add CORSMiddleware like this:

app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Allows all origins
allow_credentials=True,
allow_methods=["*"], # Allows all methods
allow_headers=["*"], # Allows all headers
)

[darkclouder]

Please note that Safari does not support the wildcard * in some fields.
If wildcard is used in the middleware config, the middleware should explicitly send all values being used.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods#Browser_compatibility

[BramVanroy]

I seem to be running into the same issue:

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["*"])

@app.post("/tokenize/", summary="Process batches of text", response_model=ResponseModel)
def tokenize(query: RequestModel):
    # do stuff

but after a POST request from my React front-end, console notifies me:

Access to fetch at 'http://127.0.0.1:8000/tokenize/' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.

[ScrimForever]

@BramVanroy
I used from starlette.middleware.cors import CORSMiddleware for workaround and works fine. If this can help you, let me know !

[ycd]

@ScrimForever was it an import issue in your case?

[ScrimForever]

@ScrimForever was it an import issue in your case?

When i use fastapi CORSMiddleware, same as Bram, i receive error when use method POST, so, i change to starlette cors, and works. Just it.

[Mause]

That seems very strange, as fastapi doesn't have a cors implementation - it just exposes starlettes one

See https://github.com/tiangolo/fastapi/blob/master/fastapi/middleware/cors.py

[tricosmo]

I have the same issue here. any updates, guys?

[ycd]

@tricosmo try importing from Starlette.

from starlette.middleware.cors import CORSMiddleware

[tricosmo]

@tricosmo try importing from Starlette.

from starlette.middleware.cors import CORSMiddleware

Thanks @ycd , that is what I have. Plus as @Mause mentioned about, it doesn't make sense.

import logging

import uvicorn
from fastapi import APIRouter, Depends, FastAPI
from fastapi_aad_auth import AADAuth, AuthenticationState
from starlette.middleware.cors import CORSMiddleware

auth_provider = AADAuth()

logging.basicConfig(level="DEBUG")
router = APIRouter()


@router.get("/hello")
async def hello_world(
    auth_state: AuthenticationState = Depends(auth_provider.api_auth_scheme),
):
    print(auth_state)
    return {"hello": "world"}


app = FastAPI(
    title="fastapi_aad_auth test app",
    description="Testapp for Adding Azure Active Directory Authentication for FastAPI",
    openapi_url=f"/api/v1/openapi.json",
    docs_url="/api/docs",
    swagger_ui_init_oauth=auth_provider.api_auth_scheme.init_oauth,
    redoc_url="/api/redoc",
)

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:8001", "http://0.0.0.0:8001"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


app.include_router(router)


if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", debug=True, port=8001, log_level="debug")

Access to fetch at 'https://login.microsoftonline.com/<tenant_id>/oauth2/v2.0/token' from origin 'http://localhost:8001' has been blocked by CORS policy: 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.

[Mause]

@tricosmo I think you have misunderstood the purpose of cors - you can only configure requests to your website, not from

[tricosmo]

@Mause Thanks, that is a bit of silly me.

[synchronizing]

My solution was to move my app.add_middleware(CORSMiddleware, allow_origins=["*"]) to the bottom of all previous app. configuration. I'm using fastapi_versioning, and it seems to break middleware when placed after the CORSMiddleware config.

[jacquesasinyo]

It worked

[NatanSiilva]

I managed to solve it after a lot of struggle hehe. Cors with fastapi, the url of the client that can access the end-point of the api must be declared and also in the response of each request it must be declared which client can receive the response. Unlike django, which has a setup that abstracts all this logic, making it necessary to declare the client's url only once. So I created a middleware to add the header in the requests responses.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

from .routes import api

app = FastAPI(
    openapi_url="/openapi.json",
    docs_url="/docs",
    redoc_url="/redoc",
)


@app.middleware("http")
async def add_cors_headers(request, call_next):
    response = await call_next(request)
    response.headers["Access-Control-Allow-Origin"] = "https://www.teste.com.br, http://localhost:3000"
    response.headers["Access-Control-Allow-Credentials"] = "true"
    response.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE, OPTIONS"
    response.headers["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
    return response

origins = [
    "https://teste.com.br",
    "http://localhost:3000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

app.include_router(api)

[kyrylo-khatsko-MDTU-VOL]

I found the issue!

Try a solution from this answer https://stackoverflow.com/questions/69802274/getting-a-cors-error-even-after-adding-corsmiddleware/75699497#75699497

Solution 1) Tested by us. Go throw all your fastAPI routes. Remove every trailing slash.

For example, we had this code

@category_router.get("\", response_model=List[Category])
def get_categories():
    return category_reader.get_dashboard()

Change it to

@category_router.get("", response_model=List[Category])
def get_categories():
    return category_reader.get_dashboard()

Solution 2) We did not test it, but it should have the same effect.

Install this module https://libraries.io/pypi/fastapi-lambda-router

[sxwebster]

I've got an issue where, despite specifying CORS requirements exactly as stated in the tutorial page the API processes the request and provides a valid response.

Snapshot of the code:

from fastapi import FastAPI
#from fastapi.middleware.cors import CORSMiddleware
from starlette.middleware.cors import CORSMiddleware
from fastapi.responses import FileResponse
from fastapi.responses import StreamingResponse
from fastapi.responses import PlainTextResponse

app = FastAPI(
    title="AwesomeAPI",
    description=description,
    version="0.0.2",
    terms_of_service="http://#",
    contact={
        "name": "NA",
        "url": "http://myotheruniquedomainname.com",
    },
    license_info={
        "name": "No on-licencing permitted.",
    },
    openapi_tags=tags_metadata,
)

origins = [
    "https://myuniquedomainname.com",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/test")
async def read_me():
    return {"Hello": "Test"}

If I make a request from a local file, or from a file hosted on another server / URL then the request succeeds when I expect it shouldn't.

[tlinhart]

...request direct from the docs page...

In that case the origin is the same and thus the request is not subject to CORS, is it?

[sxwebster]

Long day and got confused by the end of typing. CORS isn't being followed if I'm testing from a localhost file, or by deploying that file on another domain.

Today I'll test with a fresh example script and see what happens under the same conditions.

[fohria]

were you able to get it working @sxwebster ?

[aksfyi]

I was using APIRouter() for routing , solution by @nefarioustim -#1663 (comment) worked for me.

[zfrhv]

The backend server should redirect, it should return 401 unauthorized and the client side (frontend) needs to redirect by himself.
It's called Authorization Code Flow.

[shashiwtt]

Hi all,
i'm facing CORS error in my Application with FastAPI
But it's working in Postman and Web
i also added

like this

app = FastAPI()

app.add_middleware(
CORSMiddleware,
allow_origins=[""], # Specify the allowed origin
allow_credentials=True,
allow_methods=["POST", "GET"],
allow_headers=[""],
max_age=3600,
)

and added below way and many other ways but not working
app.add_middleware(CORSMiddleware,
allow_origins=[""], # Replace "" with the list of domains you want to allow.
allow_credentials=True,
allow_methods=[""],
allow_headers=[""],
)
Any help , would be much appreciated Thank you!

[OneideLuizSchneider]

The only way to solve it, at least for me was moving the add_middleware at the end of the code, like some of you said.

app = FastAPI(docs_url=None, redoc_url=None)

@app.get("/")
def status():
    return {"status": "ok"}
  
origins = ["*"]    
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    expose_headers=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

[Dsafiev]

I just want to notice, that runtime errors in endpoint will cause CORS error on front. So if you faced this - check logs on the server side.

[samplec0de]

In my case the problem was in '/' at the end of origin. "https://example.com/" -> "https://example.com"

[dejoma]

Summary of every single solution in all of these threads 😘

Yes the struggle is still real in 2024 😒 😭 😭 🧨

I have just spent the entire day on this, let me take you through all the steps I've tried/taken and "which delta" eventually made the shangabang work.

TL/DR

Before you try anything, remove all trailing slashes, even in @router.post("/") ➡️ @router.post("")

---

• Avoiding wildcards as much as possible (in my case wildcards ares not needed, and origins=['*'] is not compatible with allow_credentials=True)
  • You need to specify e.g. Authorization and Content-Type in allowed_headers
• Manually adding handlers for preflights (link here)
• Using Starlette imports
• I noticed that I have Origin: null and maybe that's why it's failing, found a comment here where somebody posted some curl commands and indeed, without the Origin you do not get status 200 as a response.
  • Found some code here as well, that manually adds that through some functions, and yes the Origin header was filled but my god this code 🤮 . I'd rather delete my repo all together at this stage. No, this still didn't work even with Origin
• Realised there are some localhost/CORS/Origin things that just never work, and there are dev-tools/browser-extensions for this, installed this one.
  • Noticed that instead of adding the actual 'Origin', it adds the destination as Origin 🤦🏻‍♂️.
  • For me https://backend.domain.com was not an 'allowed origin', hence I added that in FastAPI allowed origins.
• Avoid .add_middleware but using app = FastAPI(middleware=..) instead
• Re-ordering things, add CORS middleware at the end
• Noticed that my 307 Temporary Redirect doesn't pass along the auth header, start trying stuff like this from the NextJS docs in the frontend (NextJS) where I manually add headers.
• Make use of the 'app generator setup' (link here)
• Removed trailing slashes, even though I only had @router.post("/"), I still went ahead and changed it to @router.post("")

MAGIQUE 🪄 🧙🏻‍♂️ ✅ IT WORKS

The changes that are currently present in my backend are:

• Removal of the trailing slashes, this was the one that "made it work".
• The app generator I mentioned above - again link here.
  Changes in my frontend:
• https://vercel.com/guides/how-to-enable-cors#enabling-cors-in-a-next.js-app
  And in my browser:
• The CORS Unblock extension that adds "Origin" header to my request on http://localhost:3000 only.

But what the fudge is actually working then?

• Removed the app generator, now my setup looks like:

from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(..,redirect_slashes=False)
app.include_router(best_router_known_to_mankind)
@app.get("/ping)"
async def healthcheck():
return "pong"
app.add_middleware(...)

Still works.

• Turned off chrome extension, still works. Deleted chrome extension, still works.

• Remove this stuff from the frontend, still works.

• Changing @router.post("") back to @router.post("/"), wait for it..

  • 422 Unprocessable Entity, authorization header is missing.
  • I am using NextJS in the FE, where I have a rewrite from /api/:path to https://backend.domain.com/api/:path
  • My initial request that will get a 307 Temporary redirect does have an Auth header, but the redirected one does not.

  That's it.

  Conclusion

  Remove all trailing slashes, even if your route is @router.get("/") remove that /, and add your CORS middleware all the way at the end after route inclusion and after other middleware definition. I sincerely hope this rant/summary helps anybody reading it. Have a nice day

[vchan-in]

Approved!

[ZhimaoLin]

The factory pattern works for me. Thank you!
#1663 (comment)

[fayanLiao]

I also meet the cors error,It not present in my chrome network display cors error,It display my chrome console.
My code was deploy aws environment，get and delete request does'n display this error, but in POST request,the error is show that.
I choose lots of ways to try it,all of bad,I have no idea to solve this problem

[phanav]

My case was specific to server side event. I finally notice that I must set withCredentials: true while making request on the client side.
This might save a lot of time and frustration for those who are lost.

const eventSource = new EventSource(`${path}`, 
      { withCredentials: true })

[Breezewrf]

I have just figured out the problem.
I have tested following solutions:

• response.headers["Access-Control-Allow-Origin"] = "http://192.168.10.82:8081"
• from starlette.middleware.cors import CORSMiddleware
• app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"], )

The result is that only the app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) work for me. There is no need to take other two methods.

The most important is, I find there is a small bug in my code of the API, but it only report CORS error on web instead of throwing error correctly on python log.

[senese]

This discussion started in 2020 and this problem still happens. Is there any fix being worked on? Even Flask that has a poor documentation and "structure" have CORS easily set up.

[dejoma]

#7319 (comment) my comment

[akmalmzamri]

WHILE DEBUGGING THIS, MAKE SURE YOUR UVICORN SERVER IS PROPERLY RESTARTED!!

Wasted one whole day trying all the solutions to debug the issue lmao. The problem was a simple typo on my origins, but I thought it was not working because I still received the same error on my frontend. Turns out the server was not reloading, even though it seemed like it was from the log.

I also thought I "killed" the process by closing the VS Code terminal window. Had to manually kill the task to reboot the server (guide)

I've never felt so stupid lol.