CORS Configuration for FastApi

Question

I deployed a react app in a server ubuntu 20.04 with nginx 1.18.0 and this is the .conf file.

    server {
        listen 80;

        server_name myapp.com;

        return 301 https://myapp.com$request_uri;

        root /var/www/myapp/build;
        index index.html;

        access_log /var/log/nginx/myapp.access.log;
        error_log /var/log/nginx/myapp.error.log;
        location / {
                try_files $uri /index.html =404;
        }
}

And in this same server I deployed my FastApi

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

app = FastAPI()

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

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

@app.get('/')
def home():
    return {'message': 'Hi app'}

Then from my react app I send a request by axios:

const API = "http://127.0.0.1:8000/";
const response = await axios(API);

My api run in http://127.0.0.1:8000 and I get "Cross Origin Request Blocked: The same origin policy does not allow reading of remote resources at http://127.0.0.1:8000. (Reason: CORS request unsuccessful). Status code: (null)".

This is my request headers that I can see in the browser:

    Accept: application/json, text/plain, */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: es-MX,es;q=0.8,en-US;q=0.5,en;q=0.3
    Connection: keep-alive
    Host: 127.0.0.1:8000
    Origin: https://myapp.com
    Sec-Fetch-Dest: empty
    Sec-Fetch-Mode: cors
    Sec-Fetch-Site: cross-site
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:102.0) Gecko/20100101 Firefox/102.0

In my local I have the same app and api and I don't have the problem, the diference is that the react app run in http://localhost:3000 by npm and of course in my allow origins in my api I have "http://localhost:3000"

If you've deployed your API to the _same server_, why would you make the request against localhost? The request should go to your FastAPI server address (which seems to be located on `myapp.com`), not localhost (which would be a reference to the device running the code itself). It's also important to remember that FastAPI will not add the CORS headers if the response is an error response (i.e. 5xx error code, etc.). It'd also be helpful if you could add the response from your API server. — MatsLindh, Jun 01 '22 at 07:00

jerego · Answer 1 · 2022-06-08T22:01:52.627

-1

Consider setting the header in nginx.

Edit the file /etc/nginx/sites-enabled/yoursite

add: add_header Access-Control-Allow-Origin *;

Like this:

server {
...
...
add_header Access-Control-Allow-Origin *;
...
...
    }
}

And restart your nginx.

Also, Do not enable all origins in a production environment.

edited Jun 08 '22 at 22:01

answered Jun 01 '22 at 05:48

jerego

41
6

1

Are you aware of security consequences? – Jan Garaj Jun 01 '22 at 05:53
Yes, I will edit to clarify. But he was already adding * in his FastApi. Of course you should never do that in a production environmet. The point was that you can add those headers at the webserver. – jerego Jun 01 '22 at 06:01
1

Yes I know, It was some of the things that I try for debug and see if this solve the problem but it didn't. Thanks – Jarorb Jun 01 '22 at 06:09

CORS Configuration for FastApi

1 Answers1