Hey everyone, I am trying to test out gooddata ui in my react application, and have been following this tutorial I am currently encountering a CORS issue in development, when trying to use `<InsightView`:

Access to fetch at '<https://audette.on.gooddata.com/gdc/account/profile/current>' from origin '<http://localhost:3000>' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

In order to attempt to fix this, I followed the instructions here and set up a

setupProxy.js

(see below) and made sure to

yarn add http-proxy-middleware

I made some modifications to the sample proxy, replacing

proxy

with

createProxyMiddleware

and replacing

<http://secure.gooddata.com|secure.gooddata.com>

with

<http://audette.on.gooddata.com|audette.on.gooddata.com>

, but am still getting the error. Does anyone know how to make this work on localhost?

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
     app.use(createProxyMiddleware("/gdc", {
         "changeOrigin": true,
         "cookieDomainRewrite": "localhost",
         "secure": false,
         "target": "<https://audette.on.gooddata.com>",
         "headers": {
             "host": "<http://audette.on.gooddata.com|audette.on.gooddata.com>",
             "origin": null
         },
         "onProxyReq": function(proxyReq, req, res) {
             proxyReq.setHeader("accept-encoding", "identity")
         }
     }));
     app.use(createProxyMiddleware("/*.html", {
         "changeOrigin": true,
         "secure": false,
         "target": "<https://audette.on.gooddata.com>"
     }));
     app.use(createProxyMiddleware("/packages/*.{js,css}", {
         "changeOrigin": true,
         "secure": false,
         "target": "<https://audette.on.gooddata.com>"
     }));
 };

Hello @Daniel! If you're still running into CORS issues it most likely means that the setupProxy.js is not working correctly, or even not being applied at all. Since I do not know the details of your setup, I would suggest the following: 1️⃣ Run @gooddata/create-gooddata-react-app to create a new React boilerplate application from scratch. Double check that the CORS is not an issue, and then investigate/compare the differences in Network requests. 2️⃣ Configure your hosts file to change your localhost from something like local.dev. Then you can ask our support@gooddata.com to allow local.dev as a CORS origin for the domain

<http://audette.on.gooddata.com|audette.on.gooddata.com>

. This way you won't need to worry about proxy at all.

Hello @Daniel, there is a public api to manage CORS setting for your domain. https://help.gooddata.com/doc/enterprise/en/expand-your-gooddata-platform/api-reference#operation/addCorsAccessDomains

Hi there. A note from me, as I was also struggling with this issue initially. Based on the symptoms, it seems to me that the proxy is working fine, but you did not update the backend URL in your app’s code. So, the app is not using the proxy and still trying to call GoodData server directly. See this line: https://github.com/gooddata/gooddata-create-gooddata-react-app/blob/master/bootstrap/src/constants.ts#L6 - I assume it should be updated to localhost as well. (CC @Dan Homola perhaps we should make this clearer in our docs).

@Andy yes that was it! Thank you everyone for your responses