1

I have a web page served by FastAPI that on a button click is initiating a POST request using pure Javascript to a route in my API which then should redirect to an external page.

The Javascript:

function submit(url) {
let xhr = new XMLHttpRequest();
xhr.open("POST", url, false);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(); }

In my app FastAPI app, I added the following:

    app.add_middleware(
    CORSMiddleware,
    allow_credentials=True,
    allow_origins=['*', 'http://127.0.0.1:8080', 'http://127.0.0.1:8080/OpryW?', 'http://127.0.0.1:8080/OpryW'],
    allow_methods=["*"],
    allow_headers=["*"],
)

When clicking the button, however, I am still getting a CORS error.

Here are some details about the request:

POST: http://127.0.0.1:8080/OpryW

Request headers:

POST /OpryW HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 19
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
sec-ch-ua-platform: "macOS"
Content-Type: application/json
Accept: */*
Origin: http://127.0.0.1:8080
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://127.0.0.1:8080/OpryW?
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

Response headers:

HTTP/1.1 307 Temporary Redirect
date: Mon, 01 Nov 2021 20:00:10 GMT
server: uvicorn
location: http://www.google.com
access-control-allow-origin: *
access-control-allow-credentials: true
Transfer-Encoding: chunked

Why am I still getting a CORS error?

Thanks

Tomer
  • 33
  • 6
  • Browsers ignore the `Access-Control-Allow-Credentials` response header when the wildcard is used in the `Access-Control-Allow-Origin` response header; you have to specify a specific origin in the latter. – jub0bs Nov 01 '21 at 22:34
  • @jub0bs well, I tried to remove the wildcard and add only the required origins and still getting the same issue. – Tomer Nov 02 '21 at 16:38
  • Ah! But I see now that you have a redirect. Can you edit your question and add the error message that you're getting. Also, see https://stackoverflow.com/questions/69494027/access-control-allow-origin-equals-origin-but-the-browser-still-denies-access/69497937#69497937 – jub0bs Nov 02 '21 at 17:45
  • It is the same CORS error – Tomer Nov 02 '21 at 18:59
  • Do you mean that you're getting the same error as in the question I linked to? – jub0bs Nov 02 '21 at 19:14
  • Ah, no. This is the CORS error I am getting (sorry for the confusion) `Request URL: https://www. google.com/ Referrer Policy: strict-origin-when-cross-origin Provisional headers are shown Learn more Referer: http://127.0.0.1:8080/ User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36` – Tomer Nov 02 '21 at 19:56
  • What you posted is a fragment of the HTTP response, not a CORS error. The CORS error, if any, will be printed in your browser's console. – jub0bs Nov 02 '21 at 20:01
  • I got it now, `main.js:6 Access to XMLHttpRequest at 'https://www.youtube.com/' (redirected from 'http://127.0.0.1:8080/validate/mdHe7') from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: ` – Tomer Nov 02 '21 at 20:10

1 Answers1

0

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

Kyrylo
  • 51
  • 6