Access-Control-Allow-Origin header console complaint

Discussion
1

Hi, all,

Adding a console.log message in a Javascript query on a table-cell-change event (which would force the script presumably to get data from Retool) is suddenly resulting in this message:

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?

2

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.

3