CORS issue from 'null' source?

[dylankbaker]

Hey all!

I'm attempting to make a POST request to an external API (sending it some JSON based on input from a form). It's got custom headers, so it needs to make a preflighted CORS request, which is where I'm having an issue:

Access to fetch at '[the api url]' from origin 'null' 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 requested resource. [...]

My question is: why is the origin 'null'?

If I'm understanding CORS correctly, the CORS issue itself might need to be resolved on the API's end by allowing access to their resource from the origin <my site>.retool.com, but right now it seems like the origin is null.

FWIW, I'm making the request via the "Custom REST API" module, but tried it with pure javascript as well and got the same error.

Does anyone have a sense of what's going on here, or know the best place to start debugging?

[Isaac-H]

Hi Dylan, since JS in Retool runs in a sandbox, the CORS value will always have a null origin. Could you elaborate what you mean by the "Custom REST API" module? Is that a REST API resource you set up, then you are trying to make the request via a query in your app? Or something else?

[dylankbaker]

Oh, that makes sense! Sorry yes, it's a REST API resource, and I'm making a resource query that triggers when a button is clicked. It's configured like this:

The REST API:

The resource query:

[cperea]

Hey @dylankbaker thanks for those screenshots! I do think that you are going to first have to address this on your API's end and add a CORS configuration to allow POST operations from the Retool app. Please keep us posted and let us know if this works for you!