Http not sending token in GET request. CORS issue?


#1

I am trying to send a GET request to a backend api that requires a token to be sent in the header. I have not been able to get it to work, and I suspect it is a CORS issue. While I am new to nativescript, I have seen the problem elsewhere (and I have been able to get the token to work elsewhere).

Here, it seems like the token is not getting sent, and I am getting a 403 “forbidden” error. I am currently building for ios. I have been trying with the angular http module.

My code is below. What is the current advice for bypassing CORS problems for api calls with nativescript?

I am not able to change the api’s policies–I don’t control it and they are large.

I have seen mention of updating App_Resources/ios/info.plist. This is described here: https://github.com/NathanWalker/angular-seed-advanced/issues/462 and https://stackoverflow.com/questions/48012342/http-request-fail-on-nativescript-angular. I have followed the advice there, but it has not made any difference yet.

ts:

getAPI(){
    var token = [TOKEN]
    var url = [URL]
     let headers = new HttpHeaders();
     headers.append('Authorization', 'Bearer ' + token)
     return this.http.get(url, {headers: headers}) 
      .subscribe(data => {
          console.log(JSON.stringify(data))
        }, err => {
           console.log(JSON.stringify(err));
        });
}

App_Resources/ios/info.plist:

....
<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
</dict>
 </dict>
</plist>

#2

What is your content type set to in the header? I assume it’s “application/json”…?

Also, try to use fetch and see if it works with that. A fellow had a long and painful issue with http, too. Here’s the thread:

And here’s the fetch api:
https://docs.nativescript.org/cookbook/fetch


#3

Did you try a clean build after updating plist, most time it worked for me. Besides, would you mind sharing the URL you are trying to hit, to take a look from our end?


#4

Thank you both for your replies. I did a clean rebuild with the code I had above, and same issue. I was thinking fetch might be a good alternative. I was not sure it would work with angular, but I will take a look at the fetch link provided.


Simple Post Request to my URL gives me "Unable to resolve host"
#5

“fetch” is working for me to access the api. Thanks for the suggestion. As an fyi for others, the working code is below.

Do you know why fetch might work, but angular http does not? Are there drawbacks to using fetch, instead of angular http, that I should be careful of?

Here is the code that works for me (I no longer need the additions to info.plist I entered before):

getAPI(){
    var token = TOKEN
    var url = URL
    return fetch(url, {
       method: "GET",
       headers: new Headers({'Authorization': 'Bearer ' + TOKEN})
     }).then((response) => {
          return response.json();}) //get results in sweet sweet json. 
          .then((returnedData) => { 
             this.returnedData.forEach((item)=>{ //in my case I want to loop through the results
                  console.log('response = ' + item)
               })
         }).catch((error) => {
            console.log(JSON.stringify(error.message))
         });
     }

#6

Did you look at the code I posted (the one where I mentioned someone had similar issues with http)? Granted, the person did not use authorization, but I asked if you had the right headers, content type, etc? I have posted both the fetch and the http code for him and both worked. The only “issue” was that he did not pay attention to the use of arrow function and the correct content type spec. Here is the code again for the http: https://play.nativescript.org/?template=play-tsc&id=K9calP&v=2

You could also test your http code (even by creating a small sample project) using httpbin service: https://httpbin.org

Using that service, you can test your code using various authentication and see if the issue is on your end.


#7

Thanks. I did see that link. I am confident in the headers and content type (as it has worked with angular on the browser). In the link, I believe that is javascript’s ‘http’ you are using (as in, “var http = require(“http”)”) instead of angular’s updated http module, no? I can get fetch to work with angular, but not yet able to make authenticated call with token on nativescript ios using angular’s http.

I am not opposed to using fetch, unless there is some drawback I am not aware of.


#8

That example was in typescript. I don’t know “which” http module it loads. I don’t know Angular, and so I have never used it.


#9

Thanks. Appreciate the info.


#10

thank you so much fixed my issue… didn’t know http request is forbidden by default in ios.