Http request fail on NativeScript Angular

问题

I have the Groceries tutorial, working. Then I go to the user service and change the URL of the login:

login(user: User) {
let headers = new Headers();
headers.append("Content-Type", "application/json");

return this.http.post(
  "http://ws.u-vox.com/api/noauth/loginvenue",
  JSON.stringify({
    username: user.email,
    password: user.password,
  }),
  { headers: headers }
)
.map(response => response.json())
.do(data => {
  Config.token = data.Result.access_token;
})
.catch(this.handleErrors);
}

handleErrors(error: Response) {
console.log(JSON.stringify(error.json()));
return Observable.throw(error);
}

When I press sign in I would expect a http message and a JSON on the terminal. But instead I'm getting this mess, and I don't know what is happening.

CONSOLE LOG file:///app/shared/user/user.service.js:38:20: {"line":993,"column":38,"sourceURL":"file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js","originalStack":"ZoneAwareError@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:993:38\nfile:///app/tns_modules/tns-core-modules/http/http-request/http-request.js:86:37\nUIApplicationMain@[native code]\nstart@file:///app/tns_modules/tns-core-modules/application/application.js:211:26\nbootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:72:28\nbootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:60:26\nanonymous@file:///app/main.js:7:57\nevaluate@[native code]\nmoduleEvaluation@[native code]\n[native code]\npromiseReactionJob@[native code]","zoneAwareStack":"file:///app/tns_modules/tns-core-modules/http/http-request/http-request.js:86:37 [<root>]\nUIApplicationMain@[native code] [<root>]\nstart@file:///app/tns_modules/tns-core-modules/application/applicati
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:569:26: Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:98:31 [<root>]

My endpoint works outside NativeScript app:

HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Content-Type: application/json
Transfer-Encoding: chunked
Connection: close
Cache-Control: no-cache, private
Date: Thu, 28 Dec 2017 15:00:39 GMT
Allow: POST

{"username ... }

回答1:

I think this issue is due to CORS (cross domain) request.

First make sure the url on which you make the post request have its CORS enabled.

Second, if you are using iOS to run your app, add the following to /nativescript/App_Resources/iOS/info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <!--Include to allow all connections (DANGER)-->
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

For android I think there is an equivalent setting.

来源：https://stackoverflow.com/questions/48012342/http-request-fail-on-nativescript-angular

标签

angular2-nativescript