Blocked by CORS policy

App Building
1

When I try to do a POST to get the embeded URL, I get this error:

BlockquoteAccess to fetch at 'https://user.winfakt.app/api/embed-url/external-user' from origin 'https://winfakt.app' 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.

How can I fix this?

Thanks!

2

Patrick,

How are you making this call? From a browser or from another client like postman or with curl?
Try adding this to your header and make the request curl or postman:

Access-Control-Allow-Origin : *

1 Like
3

Hey Marc,

I'm trying to make this call from browser yes. I have a piece of Javascript that does the POST to get the embeded URL and than opens the Retool app in a iFrame. This is the code. But still get the error

var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer retool_01t329xvvsdowsfwxwz2ep5r");
myHeaders.append("Access-Control-Allow-Origin", "*");
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "landingPageUuid": "e54hw5be-873c-11ee-9a26-12d8c83399w3",
  "groupIds": [
    1742135
  ],
  "externalIdentifier": "abc1a23a",
  "sessionDurationMinutes": 43200,
  "userInfo": {
    "firstName": "Patrick",
    "lastName": "Mast",
    "email": "my.email@email.com",
    "metadata": {
      "userID": 37232
    }
  }
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://retool.winfakt.app/api/embed-url/external-user", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

The Authorization codes and others are not real, for security purpose. :wink:

4

Hey @PatrickMast! The intended flow here is for a backend service to make that request instead of having it made directly from the browser. Is there a particular reason that you are looking to opt for browser requests instead?

5

Hey @Kabirdas,

Thank you for your reply.

Yes, in this use case we have a setting in the app that creates a menu that opens an modal form with an iframe in it. What appears in that iframe is a setting in the app.

An example of a setting in the app is:

let url = "https://mu.retool.com/embedded/public/b1226355-aq70-4319-edf9-3431h71ba34a";
return encodeURI(url);

Patrick

6

:thinking: would it be possible to have your browser make a request to a backend service that, in turn, requests the URL and returns it to the browser?

7

Hey @Kabirdas. This would be possible but much harder to to on our end. Is this the only available solution to this issue?

Thanks!

Patrick

8

Hey @PatrickMast! At the moment that's the only option I'm aware of unfortunately :confused: Since the request to the backend contains your API key, I'd be worried about the security of having it sent directly from the browser as well.

I did bring the issue up with the dev team but it doesn't look as though there are plans to change the behavior for now.

9

Hey @Kabirdas,

Ok, I understand your reasoning.

:grinning:

Patrick