0

My frontend and backend services are in different origins, hence problem with CORS, but in my backend (Python fastAPI) I have already added allow all origins:

api.add_middleware(
    CORSMiddleware,
    allow_origin_regex=".*",
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

This is how my frontend is making the call

fetch('https://someurl.com/call', {
        method: 'POST',
        headers:{
            'Content-Type': 'application/x-www-form-urlencoded',
            'Signature': btoa('0000')
        },
        body: new URLSearchParams({

        })
    }).then(res => {
        return res.json()
    })

Error that I am getting:

Access to fetch at 'https://example.com/call' from origin 'https://frontend.com' has been blocked by CORS policy: Request header field signature is not allowed by Access-Control-Allow-Headers in preflight response.

Is there something I am missing? Is my custom header 'Signature': btoa('0000') the problem?

I am trying to debug, this is what I am getting from the browser console enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Efaz
  • 284
  • 2
  • 12
  • Nothing [here](https://www.google.com/search?q=Request+header+field+is+not+allowed+by+Access-Control-Allow-Headers+in+preflight+response.+site:stackoverflow.com)? - it likely is the Signature but you allow all headers so weird – mplungjan Oct 05 '21 at 17:52
  • Are you running it on localhost? – Hekmatyar Oct 05 '21 at 18:06
  • @Hekmatyar No, its deployed. – Efaz Oct 05 '21 at 18:07
  • @mplungjan Its the Signature header causing the issue according to the console (I included screenshot) – Efaz Oct 05 '21 at 18:09
  • 1
    So * is not enough it seems. Try adding the headers you allow including signature – mplungjan Oct 05 '21 at 18:10
  • Maybe look at this https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests according to your error it seems you'll work with preflight request – Hekmatyar Oct 05 '21 at 18:11
  • you're not behind a reverse proxy are you? What happens if the header is added explicitly? This *might* just be bug to file against the middleware – 2e0byo Oct 05 '21 at 18:23
  • @2e0byo Adding the header explicitly, definitely did something. If you see the screenshot above, I get 2 requests blocked. Now its 1. My services are hosted in google cloud, idk if i need to set something there as well. – Efaz Oct 05 '21 at 20:44
  • Is [this](https://cloud.google.com/apigee/docs/api-platform/develop/adding-cors-support-api-proxy) relevant? I have no experience with google cloud, sadly. Your fastapi configuration looks right to me. What happens in local? – 2e0byo Oct 05 '21 at 21:03
  • https://stackoverflow.com/questions/32500073/request-header-field-access-control-allow-headers-is-not-allowed-by-itself-in-pr this maybe also could help – Darius.V Oct 09 '21 at 09:57

0 Answers0