CORS issue with Vue app

Frappe Framework
1

Hi, I’m trying to use the REST API option in a Vue app but I’m getting CORS error. The error that I’m getting says CORS header ‘Access-Control-Allow-Origin’ missing.

I try to set the allow_cors option with the following command bench config set-common-config -c allow_cors true but still getting the same error.
What should I do to get REST API working fine.

Thanks

2

Hello and welcome to the community!

true is not a valid value for the allow_cors config. Please refer to below link:
https://frappeframework.com/docs/v13/user/en/basics/site_config#optional-settings-2

I’ve extracted the relevant documentation for you:

Enables cross-site HTTP requests. Can be set to:

  • a specific origin, for example: "https://example.com"
  • a list of origins, for example: ["https://portal.example.com", "https://shop.example.com"]
  • a wildcard: "*" (Not recommended for production use)

Ideally, this should be set in the site config instead of common site config. And if you’re running a production instance, you will need to run bench restart for the changes to take effect.

3

I set the value as follows

13

But still getting the same error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://my-site/api/resource/Item"?$top=80&$inlinecount=allpages&$format=json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

What I’m doing wrong?