Access to fetch at 'https://p.retool.com/v2/p' from origin 'https://gschorervp.retool.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
We're not using an onsite Retool instance. Our provided subdomain is https://gschorervp.retool.com.
There is an
AllAttributesState state variable in the app, and a table
table_attributeValues displaying this data. Here is the query code:
console.log("=== Running record_cell_change"); const attrs = AllAttributesState.values.allAttributes; const newVal = table_attributeValues.selectedRow.data.attrValues; const indx = table_attributeValues.selectedIndex; console.log("=== At index " + indx + " changing value to " + newVal);
I only see this in the console window, of course. The second
console.log is not executed, as far as I can tell, which the first one is. I'm running this on Chrome, FWIW.
Any idea what's going on here?
CORS is a security mechanism implemented by web browsers to restrict cross-origin requests. It requires the server to include specific headers in the response to indicate which origins are allowed to access the resource. The 'Access-Control-Allow-Origin' header is one of those headers.
To solve this issue, you can follow these steps:
Check server-side configuration: Make sure that the server hosting the requested resource is configured to include the 'Access-Control-Allow-Origin' header in its responses. This header should contain either the specific origin that is allowed to access the resource or a wildcard "*" to allow access from any origin.
Specify allowed origins: If you have control over the server hosting the resource, you can configure it to include the 'Access-Control-Allow-Origin' header and specify the specific origins that are allowed to access the resource. For example, if your client-side code is hosted on "
example.com," the server should include the following header: Access-Control-Allow-Origin:
example.com. This allows only requests originating from "
example.com" to access the resource.
Use wildcard '' cautiously: If you want to allow access from any origin, you can include the wildcard "" in the 'Access-Control-Allow-Origin' header. However, be cautious when using this approach, as it allows any website to access your resource, potentially exposing sensitive information.
Additional headers: Depending on your application's needs, you may need to include other CORS-related headers, such as 'Access-Control-Allow-Methods' and 'Access-Control-Allow-Headers'. These headers define the HTTP methods and headers allowed in cross-origin requests.
Proxy servers: If your application is making cross-origin requests through a proxy server, ensure that the proxy server is correctly configured to pass the necessary CORS headers from the original server response to the client.