I am trying to add a custom header to my angular js GET request as below:

    $http({
        method : 'GET',
        url : s,
        headers : {
        "partnerId" : 221,
         "partnerKey" : "heeHBcntCKZwVsQo"
        }
    })

But the issue is the headers are getting added to Access-Control-Request-Headers as below and I am getting 403 Forbidden response:

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0)
Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: partnerid,partnerkey
Origin: http://localhost:8080
DNT: 1
Connection: keep-alive

I also tried below changes but no luck

return $http.get(s, {
    headers : {
        'partnerId' : 221,
        'partnerKey': 'heeHBcntCKZwVsQo'
        }
    })

In other related answers in SO I saw that the header partnerId and partnerKey need to be enabled in server side. But I am able to add these custom headers in POSTMAN client and other POST clients and able to get the expected response. So I guess I am missing something. Can someone guide me in this. Thanks in advance

Edit: One more thing I noted is that partnerId is replaced as partnerid while passing in the request. Not sure if that makes a difference.

I am trying to add a custom header to my angular js GET request as below:

    $http({
        method : 'GET',
        url : s,
        headers : {
        "partnerId" : 221,
         "partnerKey" : "heeHBcntCKZwVsQo"
        }
    })

But the issue is the headers are getting added to Access-Control-Request-Headers as below and I am getting 403 Forbidden response:

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0)
Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: partnerid,partnerkey
Origin: http://localhost:8080
DNT: 1
Connection: keep-alive

I also tried below changes but no luck

return $http.get(s, {
    headers : {
        'partnerId' : 221,
        'partnerKey': 'heeHBcntCKZwVsQo'
        }
    })

In other related answers in SO I saw that the header partnerId and partnerKey need to be enabled in server side. But I am able to add these custom headers in POSTMAN client and other POST clients and able to get the expected response. So I guess I am missing something. Can someone guide me in this. Thanks in advance

Edit: One more thing I noted is that partnerId is replaced as partnerid while passing in the request. Not sure if that makes a difference.

• javascript
• angularjs
• cors
• angular-http

• I ran into something similar where custom headers were added to Access-Control-Request-Headers. Turned out I mistyped the url and it was pointing to an api that did not exist. Problem went away when i fixed the url. – Brad Himelstein Commented May 5, 2021 at 18:24

1 Answer 1

If you add any headers to a scripted cross-origin request other than any CORS-safelisted request-headers, it triggers browsers to first do a CORS preflight request.

There is no way to prevent users’ browsers from doing that CORS preflight (though there are ways to get around it locally in your own browser when doing testing; for example, by using Postman).

So for users to be able to use a Web app of yours that makes scripted cross-origin requests with custom headers, the server to which those cross-origin requests go needs to be CORS-aware.

The reason Postman can make such requests without causing a preflight is, Postman’s not a browser engine—it's an extension that’s not restricted by the same-origin policy, so doesn’t need CORS.

Postman can basically do whatever curl or other such tools can do, but just within a browser UI for convenience. It’s otherwise bypassing normal Web-security features built into browsers.