Response with status: 0 for URL: null - service

Question

I have a service that do post. The service is being hosted in another machine. When I tried to post using Postman, it works fine. Now, when I tried to post using my Angular2 app which is run in another machine I got an error "Response with status: 0 for URL: null." The code in my angular service is as follows:
postQuestions() {
var json = JSON.stringify({
"TestInfo_FK" : "612",
"Resource_FK" : 0,
"QuestionNo" : 22,
"ContentType" : "HTML",
"Content" : "This is the question from Jason",
"NoOptions" : 4,
"OptionLayout" : "Vertical",
"Answer" : "A"
});
var url = 'http://my.service.net/api/ONLINE/Question';
var params = 'json=' + json;
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
return this._http.post(url, params, {
headers: headers
})
.map(res => res.json());
}
how to solve this issue?

Answer 1

This situation arises when your hosted service is not able to be accessed via cross origin(CORS) .So if u you are accessing Spring Rest service then use #CrossOrigin annotation on service.
OR use
flask-restful to build remote API
from flask_restful.utils import cors
from flask_restful import Api
api = Api(app, decorators=[cors.crossdomain(origin='*')])

Answer 2

I found out what was causing the issue.. Its a server side issue. You need to set the CORS middleware first then the remaining API middlewares.
Please note i am working with Laravel 5.6 + Angular 5
Wrong Code
'api' => [
'throttle:60,1',
'bindings',
\Barryvdh\Cors\HandleCors::class,
],
Currect Code
'api' => [
\Barryvdh\Cors\HandleCors::class,
'throttle:60,1',
'bindings'
],