Access to XMLHttpRequest blocked by CORS policy

I'm getting the below error when trying to access https://myappuat.returnsportal.test.local

Access to XMLHttpRequest at 'https://myappuat.portalshellapi.test.local/api/portalmodule' from origin 'https://myappuat.returnsportal.test.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
​

I added the below seetings to web.config to bypass this and then I receive the below error stating that the The 'Access-Control-Allow-Origin' header contains multiple values but only one is allowed

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="https://myappuat.returnsportal.test.local" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
</customHeaders>
</httpProtocol>
</system.webServer>

Access to XMLHttpRequest at 'https://myappuat.portalshellapi.test.local/api/portalmodule ' from origin 'https://myappuat.returnsportal.test.local ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values ''https://myappuat.returnsportal.test.local, 'https://myappuat.returnsportal.test.local ', but only one is allowed.
​

I was able to set all these up in SIT ( which is a different server ) with the below urls

https://myappsit.returnsportal.test.local
https://myappsit.portalshellapi.test.local/api/portalmodule

My front-end is developed using Angular and back-end is a .NET core web API. I'm just setting up these apps in UAT and is not supposed to make code changes. For the same code-base since the issue is only with UAT, could this be something related to the server ?

Continue reading...