How to resolve CORS policy Error with 'Access-Control-Allow-Credentials' header in the response?

Question

I'm getting following Error when I try to login locally to the site. UI is build using Angular and Type Script. Same code works fine in DEV Server and there is no issue with login. Can you please help to throw some lights and resolve this issue?

Access to XMLHttpRequest at 'https://exchange-dev.xyz.com/accounts/session/env' from origin 'http://local-qa.xyz.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute

This is Chrome Network tab:

Request URL: https://exchange-dev.xyz.com/accounts/session/env
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://local-qa.xyz.com
Connection: keep-alive
Content-Length: 47
Content-Type: application/json
Date: Tue, 04 May 2021 21:00:28 GMT
Server: nginx/1.14.0 (Ubuntu)
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: exchange-dev.xyz.com
Origin: http://local-qa.xyz.com
Referer: http://local-qa.xyz.com/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

This is my environment.ts file which is poiting to DEV API server location

export const environment = {
  production: false,
  API_URL: () => 'https://exchange-dev.xyz.com/',
  ITEMS_PER_PAGE: 25

Are you providing the `withCredentials: true` option in your http requests? — eko, May 05 '21 at 18:02
I've figure out the issue. Posted the answer that solved the issue. — Partha, May 09 '21 at 18:21

score -1 · Accepted Answer · answered May 09 '21 at 18:28

This is an issue related to server security. I could able to solve the issue by installing a local certificate. Server https://exchange-dev.xyz.com is running secure env and when I was calling from my local machine it was not able to pass the cookies to server API from local Angular UI. Following command I used to install a certificate locally and next enabled chrome "Allow invalid certificates for resources loaded from localhost." going to Chrome flags : chrome://flags/ Finally it solved all security and CORS related issues.

ng serve --ssl --port 80 --disable-host-check

How to resolve CORS policy Error with 'Access-Control-Allow-Credentials' header in the response?

1 Answers1