angular 2 http post not working

问题

Here's my code:

const dummydata = {
  param1: 72766,
  param2: 'ELS'
}

var foo = JSON.stringify(dummydata)

let headers = new Headers();
headers.append('content-type', 'application/json');

this.http.post(url, foo, { headers: headers }).map(res => res.json()).subscribe(
  () => { alert('Success'); }
);

For some reason there's no data going to the server as form-datain Request Payload and the type is getting converted to OPTIONS instead of POST On the other hand if I remove, headers, then the form-data is going but another error occurs:

415 Unsupported Media Type

UPDATE: JQuery Ajax is working

UPDATE2: Already tried this:

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

回答1:

You can try this:

const dummydata = {
 param1: 72766,
 param2: 'ELS'
}

import {Headers, RequestOptions} from 'angular2/http';


let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });

 this.http.post(url, dummydata, options).map(res=>res.json()).subscribe(
        () => { alert('Success'); }
    );

回答2:

Angular way to do post request.

const dummydata= {param1:72766,
        param2:'ELS'}

    var foo=    JSON.stringify(dummydata);

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });


 this.http.post(url, foo,{headers: headers} ).map(res=>res.json()).subscribe(
            () => { alert('Success'); }
        );

for more info check this link https://angular.io/docs/ts/latest/guide/server-communication.html

回答3:

You have to check if your server support OPTIONS request, if not you need to add These lines in your htaccess file

Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

回答4:

It should be CORS problem.
When you make CORS requests from browser (call to different URL then the host of javascript files) it will automatically make OPTIONS request before any other request is made. If response is appropriate it will make GET, POST, DELETE, PUT request as written in code.
Example:

You want to make POST request to myserver.com/add-book/
Browser will make OPTIONS request to myserver.com/add-book/
If response to OPTIONS contains requested headers etc. (e.g. Allowed-Methods header) POST request will be executed

Therefore you need to have OPTIONS request enabled on your server and REST API. If you are using authentication with JWT you need to mark OPTIONS request as safe - JWT don't need to be in headers of your request.
More about OPTIONS request

回答5:

I found a better way to tackle this CORS issue by configuring a proxy for the API calls with Angular CLI:

I created a proxy.conf.json:

{
  "/API": {
    "target": "http://myserver.com",
    "secure": false
  },
  "/API2":{
    "target": "http://myserver.com",
    "secure": false
  }
}

Then in package.json under scripts:

"start": "ng serve --proxy-config proxy.conf.json",

Now for calling the APIs simply provide the URLs like "/API/getData" and CLI will automatically redirect to the http://myserver.com/API/getData

来源：https://stackoverflow.com/questions/44458064/angular-2-http-post-not-working

标签

angular

http

rxjs5