If you have an HTML file on https://foo.example.com/, and you tried to Web Embed something from https://bar.pega.net, you may have been encountered Cross-origin resource sharing (CORS) issues.
CORS is enforced by browsers, and there’s nothing foo.example.com can do — there’s no way for it to tell the browser “please let me access secured resources on bar.pega.net.”
The change has to happen on bar.pega.net — it has to have its CORS policy modified to “allow credentials” when communicating with foo.example.com. Then when foo.example.com tries to access the secured resources on bar.pega.net, the latter will set the Access-Control-Allow-Credentials header to true in its response and the browser will let things proceed.
When you have a CORS issue you’ll usually see something like this in the browser console:
Note that the error occurs when accessing [...]/api/application/v2/[...]. This tells us that we need to modify the CORS policy for the api endpoint on bar.pega.net. Since this endpoint is provided by Pega Infinity, that’s where the modification should occur. This is covered in detail in the official Pega docs here: Defining cross-origin resource sharing policies.
But usually all you need to do is the following:
- In Dev Studio, navigate to
Configure > Integration > Services > Endpoint-CORS Policy Mapping.
- Configure the CORS policy mapping for the
api/endpoint and then open the corresponding CORS policy — usually this isAPIHeadersAllowed. Note that this policy is typically used by other endpoints. If you only want to modify the policy for theapi/endpoint, create a new policy first as discussed in the documentation, then use this landing page to map the endpoint to the new policy.
- Check the box for
Allow credentials.
- Verify the additional settings, which should look like this by default if you are using the
APIHeadersAllowedrule. You will need to set these up manually if you use a custom rule.
