CORS error in FastAPI: How to set origin correctly?

Question

A frontend application from a different domain (let's say 122.133.2.5) sends requests to my backend application (which uses authorization as well).

This is my app's configuration:

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = ["http://122.133.2.5"]

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

Normally, the frontend app should be up and running at 122.133.2.5 (IP address) - which redirects to 122.133.2.5/account/login_page - but it throws a CORS error. I have checked FastAPI documentation and Stackoverflow solutions to similar problems, but the error persists. I have tried both Starlette's and FastAPI's middleware, but made no difference.

My best guess is that I don't set the origin correctly. Official documentation states that:

An origin is the combination of protocol (http, https), domain (myapp.com, localhost, localhost.tiangolo.com), and port (80, 443, 8080).

In my case, I have set both protocol and domain, but not the port. According to the front-end developer, there is no specific port for this application - he just started it on the VM of the same IP address. Both my backend and frontend IPs are part of the same internal network, so they are not accessible to the web. Frontend is written on AngularJS.

Maybe I should use allow_origin_regex? But, how would I set that, I am not sure.

Any help?

Edit:

Cors Error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://122.133.2.5:8000/token. (Reason: CORS preflight response did not succeed). Status code: 404.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://122.133.2.5:8000/token. (Reason: CORS request did not succeed). Status code: null.

Answer 1

As per FastAPI documentation:

An origin is the combination of protocol (http, https), domain (myapp.com, localhost, localhost.tiangolo.com), and port (80, 443, 8080).

So, all these are different origins:

• http://localhost
• https://localhost
• http://localhost:8080

Even if they are all in localhost, they use different protocols or ports, so, they are different "origins".

Thus, you should define the port number as well. The default port of angular is 4200. You can specify a port per "project" in angular.json. Thus, look up inside that file for the port number and/or check if a port is specified when running the AngularJS application (from the terminal). If the port number is 80 (as this might be the reason you are able to access the frontend at http://122.133.2.5 without specifying the port - when you don't specify a port, the browser assumes the default port 80), then you should add to origins: http://122.133.2.5:80.

You should also check whether the request goes through, if used ['*'] (to allow any origin - for testing purposes), since the Status code: 404 (in the error response you provided) indicates that the server cannot find the requested resource.