Getting 400 bad request when trying to access an API using Angular, but it works perfectly fine when using PostMan










0















I have already tested this API and have made a GET request on the API using PostMan and got the response. But when trying to implement it on my Angular 6 application I get a 401 unauthorized error. This is my angular code.



this.http.get('https://api.channeladvisor.com/v1/orders',headers:'Authorization':'Bearer *token*','Content-Type':'application/x-www-form-urlencoded','cache-control':'no-cache')
.subscribe((response)=>
this.channel=response;
console.log(this.channel)
)
}


I have the token and have not displayed it in the code for security reasons. I have a feeling it has something with the headers syntax but i'm not so sure.










share|improve this question
























  • Just check if the authentication mechanism is passed in headers in Postman where the header tab is different and you overlooked it... just in case...

    – Ketan
    Nov 14 '18 at 23:32











  • Under the headers in Postman the key is 'Authorization' and the value is 'Bearer token. Everything seems to be exactly the same in Postman

    – Travis Poulose
    Nov 14 '18 at 23:41











  • I just reallized that I was making a post request on the api rather than a get. But now i'm getting another error. 400 bad request.

    – Travis Poulose
    Nov 14 '18 at 23:56















0















I have already tested this API and have made a GET request on the API using PostMan and got the response. But when trying to implement it on my Angular 6 application I get a 401 unauthorized error. This is my angular code.



this.http.get('https://api.channeladvisor.com/v1/orders',headers:'Authorization':'Bearer *token*','Content-Type':'application/x-www-form-urlencoded','cache-control':'no-cache')
.subscribe((response)=>
this.channel=response;
console.log(this.channel)
)
}


I have the token and have not displayed it in the code for security reasons. I have a feeling it has something with the headers syntax but i'm not so sure.










share|improve this question
























  • Just check if the authentication mechanism is passed in headers in Postman where the header tab is different and you overlooked it... just in case...

    – Ketan
    Nov 14 '18 at 23:32











  • Under the headers in Postman the key is 'Authorization' and the value is 'Bearer token. Everything seems to be exactly the same in Postman

    – Travis Poulose
    Nov 14 '18 at 23:41











  • I just reallized that I was making a post request on the api rather than a get. But now i'm getting another error. 400 bad request.

    – Travis Poulose
    Nov 14 '18 at 23:56













0












0








0








I have already tested this API and have made a GET request on the API using PostMan and got the response. But when trying to implement it on my Angular 6 application I get a 401 unauthorized error. This is my angular code.



this.http.get('https://api.channeladvisor.com/v1/orders',headers:'Authorization':'Bearer *token*','Content-Type':'application/x-www-form-urlencoded','cache-control':'no-cache')
.subscribe((response)=>
this.channel=response;
console.log(this.channel)
)
}


I have the token and have not displayed it in the code for security reasons. I have a feeling it has something with the headers syntax but i'm not so sure.










share|improve this question
















I have already tested this API and have made a GET request on the API using PostMan and got the response. But when trying to implement it on my Angular 6 application I get a 401 unauthorized error. This is my angular code.



this.http.get('https://api.channeladvisor.com/v1/orders',headers:'Authorization':'Bearer *token*','Content-Type':'application/x-www-form-urlencoded','cache-control':'no-cache')
.subscribe((response)=>
this.channel=response;
console.log(this.channel)
)
}


I have the token and have not displayed it in the code for security reasons. I have a feeling it has something with the headers syntax but i'm not so sure.







angular api http postman http-status-code-400






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 0:04









HDJEMAI

4,434144059




4,434144059










asked Nov 14 '18 at 23:14









Travis PouloseTravis Poulose

104




104












  • Just check if the authentication mechanism is passed in headers in Postman where the header tab is different and you overlooked it... just in case...

    – Ketan
    Nov 14 '18 at 23:32











  • Under the headers in Postman the key is 'Authorization' and the value is 'Bearer token. Everything seems to be exactly the same in Postman

    – Travis Poulose
    Nov 14 '18 at 23:41











  • I just reallized that I was making a post request on the api rather than a get. But now i'm getting another error. 400 bad request.

    – Travis Poulose
    Nov 14 '18 at 23:56

















  • Just check if the authentication mechanism is passed in headers in Postman where the header tab is different and you overlooked it... just in case...

    – Ketan
    Nov 14 '18 at 23:32











  • Under the headers in Postman the key is 'Authorization' and the value is 'Bearer token. Everything seems to be exactly the same in Postman

    – Travis Poulose
    Nov 14 '18 at 23:41











  • I just reallized that I was making a post request on the api rather than a get. But now i'm getting another error. 400 bad request.

    – Travis Poulose
    Nov 14 '18 at 23:56
















Just check if the authentication mechanism is passed in headers in Postman where the header tab is different and you overlooked it... just in case...

– Ketan
Nov 14 '18 at 23:32





Just check if the authentication mechanism is passed in headers in Postman where the header tab is different and you overlooked it... just in case...

– Ketan
Nov 14 '18 at 23:32













Under the headers in Postman the key is 'Authorization' and the value is 'Bearer token. Everything seems to be exactly the same in Postman

– Travis Poulose
Nov 14 '18 at 23:41





Under the headers in Postman the key is 'Authorization' and the value is 'Bearer token. Everything seems to be exactly the same in Postman

– Travis Poulose
Nov 14 '18 at 23:41













I just reallized that I was making a post request on the api rather than a get. But now i'm getting another error. 400 bad request.

– Travis Poulose
Nov 14 '18 at 23:56





I just reallized that I was making a post request on the api rather than a get. But now i'm getting another error. 400 bad request.

– Travis Poulose
Nov 14 '18 at 23:56












1 Answer
1






active

oldest

votes


















0














May you can try add them to your headers:



'authorization': 'bearer ' + token,
'Authenticationtoken': 'bearer ' + token,
'X-Requested-With' : 'XMLHttpRequest'


My API used CakePHP3, same issue happen long ago, after added above 3 parameters everything ok :)



And more, please track your request by developer tools, and compare the difference between sucess and failed.






share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310166%2fgetting-400-bad-request-when-trying-to-access-an-api-using-angular-but-it-works%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    May you can try add them to your headers:



    'authorization': 'bearer ' + token,
    'Authenticationtoken': 'bearer ' + token,
    'X-Requested-With' : 'XMLHttpRequest'


    My API used CakePHP3, same issue happen long ago, after added above 3 parameters everything ok :)



    And more, please track your request by developer tools, and compare the difference between sucess and failed.






    share|improve this answer



























      0














      May you can try add them to your headers:



      'authorization': 'bearer ' + token,
      'Authenticationtoken': 'bearer ' + token,
      'X-Requested-With' : 'XMLHttpRequest'


      My API used CakePHP3, same issue happen long ago, after added above 3 parameters everything ok :)



      And more, please track your request by developer tools, and compare the difference between sucess and failed.






      share|improve this answer

























        0












        0








        0







        May you can try add them to your headers:



        'authorization': 'bearer ' + token,
        'Authenticationtoken': 'bearer ' + token,
        'X-Requested-With' : 'XMLHttpRequest'


        My API used CakePHP3, same issue happen long ago, after added above 3 parameters everything ok :)



        And more, please track your request by developer tools, and compare the difference between sucess and failed.






        share|improve this answer













        May you can try add them to your headers:



        'authorization': 'bearer ' + token,
        'Authenticationtoken': 'bearer ' + token,
        'X-Requested-With' : 'XMLHttpRequest'


        My API used CakePHP3, same issue happen long ago, after added above 3 parameters everything ok :)



        And more, please track your request by developer tools, and compare the difference between sucess and failed.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 15 '18 at 0:01









        Nick WangNick Wang

        54925




        54925





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310166%2fgetting-400-bad-request-when-trying-to-access-an-api-using-angular-but-it-works%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            In R, how to develop a multiplot heatmap.2 figure showing key labels successfully

            Museum of Modern and Contemporary Art of Trento and Rovereto