When I am trying to start the react application I am getting the below CORS error.
Access to fetch at ‘https://pegahost:8443/prweb/PRRestService/oauth2/v1/token’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: 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.
my EndPoint CORS policy for api/ mapping is also configured with “APIHeadersAllowed”
I am using the OOTB CableCO application in pega. ( the one that is provided inside the starter pack)
For installation, configuration, and usage please see README.md present in the zipped directory. For more information about the starter packs, see the Traditional Starter Packs documentation.
@Jeroen would you be able to offer any assistance here?
The situation maybe that it gets blocked due to it being http and not https. Localhost is always a tricky situation. Can you try and deploy it in a way that it has a proper domain and https?
@Bomma Srinivas I notice you posted a similar reply on another old post here. Please do not cross-post as this causes missed answers and confusion, and may not relate to the same product version or issue symptoms.
***** If the below information does not help please post a New Question *****
I understand you’re getting this error when trying to access the OAuth token endpoint from your locally running React application.
If you search the available documentation you may find the following troubleshooting guidelines:
This is a GenAI-researched answer - please go to the References for further details:
The error may occur because your React application running on [http://localhost:3000](http://localhost:3000) needs explicit permission to access the Pega OAuth endpoint. While you’ve configured the APIHeadersAllowed CORS policy, there are a few additional steps needed to fully resolve this issue.
Here’s a step-by-step solution:
Navigate to CORS Policy Configuration
In Dev Studio, go to Configure > Integration > Services > Endpoint-CORS Policy Mapping
This is where we’ll set up the complete CORS configuration for your OAuth endpoint
Update the CORS Policy
Locate or create a new CORS policy for the endpoint “/api/*”
Ensure the following settings are configured:
Add [http://localhost:3000](http://localhost:3000) to the allowed origins
In the allowed headers section, include:
- Authorization
- Content-Type
- Accept
- x-requested-with
- x-constellation-app (if you’re using Pega Platform™ 23)
Set Allow Credentials to true
Enable OPTIONS in the allowed methods
Configure OAuth Endpoint Specifically
Create a separate mapping for /prweb/PRRestService/oauth2/v1/*
Apply the same CORS policy or create a specific one for the OAuth endpoint
This ensures that the OAuth token requests are properly handled
Verify React Configuration
Check your React application’s endpoints.js file
Ensure the OAuth client ID is correctly configured
Verify that your request includes the necessary headers
After implementing these changes, restart your React application and clear your browser cache to ensure the new CORS settings take effect.
Common Troubleshooting Tips:
If you still see CORS errors, check the browser’s developer console for specific header issues
Verify that your Pega server’s SSL certificate is valid if using HTTPS
Ensure that the OAuth client registration in Pega allows the correct redirect URI
For additional security, I recommend:
Only enable CORS for development environments (localhost)
Use environment-specific CORS policies for production
Regularly review and update allowed origins and headers
