Getting error 401 in APIkey header with $http get and XMLHttpRequest but it's working with postman,Getting error 401 with $http get and XMLHttpRequest but it's working with postman

Not applicable

I have received a api from client and when I am trying to integrate it with angular service, getting 401 unauthorized error. But same is working with POSTMAN. Please suggest me if I am doing anything wrong.

Here is the code which I am trying:

$http({
       url:"https://xxx_test.com/data?sdate=date",
       method:"GET",
       headers:{'apikey':'key'},})

This is the response that I am getting :

{"fault":{"faultstring":"Failed to resolve API Key variable request.header.apikey","detail":{"errorcode":"steps.oauth.v2.FailedToResolveAPIKey"}}}

Console log:

angular.js:12265 OPTIONS apiurl?start_date=04/26/2018&end_date=04/26/2018 401 (Unauthorized) :3000/#/pos:1 Failed to load apiurl?start_date=04/26/2018&end_date=04/26/2018: Response for preflight has invalid HTTP status code 401.

,

favorite

I have received a api from client and when I am trying to integrate it with angular service, getting 401 unauthorized error. But same is working with POSTMAN. Please suggest me if I am doing anything wrong.

Here is the code which I am trying:

$http({
       url:"https://xxx_test.com/data?sdate=date",
       method:"GET",
       headers:{'apikey':'key'}})

This is the response that I am getting :

{"fault":{"faultstring":"Failed to resolve API Key variable request.header.apikey","detail":{"errorcode":"steps.oauth.v2.FailedToResolveAPIKey"}}}

Console log:

angular.js:12265 OPTIONS apiurl?start_date=04/26/2018&end_date=04/26/2018 401 (Unauthorized) :3000/#/pos:1 Failed to load apiurl?start_date=04/26/2018&end_date=04/26/2018: Response for preflight has invalid HTTP status code 401.

Solved Solved
0 12 6,079
1 ACCEPTED SOLUTION

sumiya96
Participant I

Hi @sandeep pandey,

Even I had come across with the same issue recently ,can you just try enabling the CORS in Apigee.

Please follow the steps from the below link.

https://community.apigee.com/questions/22/apigee-pre-flight-options-requests.html

View solution in original post

12 REPLIES 12

sidd-harth
Participant V

Hi @sandeep pandey, when you see OPTIONS & preflight terms in console logs, it is mostly the issue of CORS. You need to enable CORS on your Apigee API Proxy.

Please follow this doc & video to enable CORS.

https://docs.apigee.com/api-platform/develop/adding-cors-support-api-proxy

6877-cors.jpg

thanks @Siddharth Barahalikar. I'll ask them to enable the CORS.

@Siddharth Barahalikar- can you please explain why it's working from postman?

@sandeep pandey

Lets say the API is deployed in Apigee with is hosted on www.api-apigee.com

Now when you try to hit this from Chrome/Browser/Postman/cURL/SoapUI you will get 200 OK and data back.

But when you try to hit it from Angular UI or any other UI which is hosted on localhost or www.some-ui-domain-name.com The browser throws an 401 error because the API is hosted on www.api-apigee.com domain and it is being requested from a different domain. This is called Cross-Origin Resource Sharing.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts.

The reason it works from Postman/cURL/SoapUI is because it is not hosted anywhere, these make use of the Chrome/Browser Internet settings. It is making a direct call., not through any hosted service.

thanks for the detailed info @Siddharth Barahalikar

Kindly accept the answer, if it solved your issue.

sumiya96
Participant I

Hi @sandeep pandey,

Even I had come across with the same issue recently ,can you just try enabling the CORS in Apigee.

Please follow the steps from the below link.

https://community.apigee.com/questions/22/apigee-pre-flight-options-requests.html

thanks @sumiya96 for your quick response. I'll ask them to enable the CORS.

@sumiya96- One difference that I can see in your and my problem and i.e, On OPTIONS request I am getting "OPTIONS https://apiurl 401 (Unauthorized)". Does is make any difference?

   

I would like to know how you are setting CORS in your API Proxy.

when you set CORS in your proxy you need to set the headers as well.

401 Unauthorized is because ,proper header are not supplies to your Verify API key policy.

Here is my code for preflight requests.

 <FaultResponse>
        <Set>
            <StatusCode>200</StatusCode>
            <ReasonPhrase>CORS OK</ReasonPhrase>
            <Headers>
                <Header name="Access-Control-Allow-Methods">GET, POST, PUT, DELETE, PATCH</Header>
                <Header name="Access-Control-Allow-Origin">*</Header>
                <Header name="Access-Control-Allow-Headers">authorization,content-type,api-key</Header>
            </Headers>
            <Payload/>
            <!-- Remove default fault content. -->
        </Set>
    </FaultResponse>

Add RaisFault policy in your flow with condition.

<Condition>request.verb == "OPTIONS" AND request.header.origin != null AND request.header.Access-Control-Request-Method != null</Condition>

I am facing same problem , we enabled CORS in Apigee. Still getting 401 unauthorized error. Please let me know any other setting has to be done in angular or Apigee side.

Please Ask a New Question with your issue and also mention the steps you have implemented.