Angular2 Http not sending POST request with form data

Question

I posted this question twice on stackoverflow and I got some down vote by people who did not understand the problem.

The Problem

Moltin api requires that body data in post request sent to the route https://api.molt.in/oauth/access_token come as application/x-www-form-urlencoded only, it does not support application/json, don't ask me why cause I don't know.

So I needed to send a post request with angular2 that fulfils all of that, so I used the code below.

let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({headers});

let body = {
    client_id: env.MOLTIN_CLIENT_ID,
    grant_type: 'implicit'
 }

this.http.post('https://api.molt.in/oauth/access_token', body, options)
  .subscribe((result) => {
    console.log(result, 'result reached')
  }, (err) => {
    console.log(err, 'error reached');
  });

But the above code never works, the formdata is parsed wrongly so the server returns the error

XMLHttpRequest cannot load https://api.molt.in/oauth/access_token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 400.

The reason why this error is thrown, is because during the preflight the browser sends an OPTIONS request which the server does not acknowledge.

I also tried stringifying the body values using JSON.stringify(body), but this did not help.

PS I have the solution that is why I am making this post so others can benefit from it, I will post it shortly below

Also Note: That I am using a 3rd party API and cannot modify anything there

George · Accepted Answer · 2017-03-17 10:16:28Z

After searching through the documentation for several hours, I found URLSearchParams and decided to try it, lo and behold it worked.

Below is the final solution

 let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
 let options = new RequestOptions({headers});
 let  body = new URLSearchParams();
 body.append('client_id', env.MOLTIN_CLIENT_ID);
 body.append('grant_type', 'implicit');

this.http.post('https://api.molt.in/oauth/access_token', body.toString(), options)
  .subscribe((result) => {
    console.log(result, 'result reached')
  }, (err) => {
    console.log(err, 'error reached');
  });

Venkateswaran R · Accepted Answer · 2017-03-17 10:18:16Z

0

@James, Actually you need to enable the Access-Control-Allow-Origin in your WebApi project. The below code you want to add it under webconfig file.

<configuration>
  <system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
  </httpProtocol>
</system.webServer>
</configuration>

answered Mar 17, 2017 at 10:18

Venkateswaran R

4782 gold badges5 silver badges19 bronze badges

2 Comments

George Over a year ago

If you read the question well, I am using a third party API, I don't have access to it and cannot modify the API

Venkateswaran R Over a year ago

You need to pass header along with body. So try this this.http.post('api.molt.in/oauth/access_token', { headers, body }, options)

Collectives™ on Stack Overflow

Angular2 Http not sending POST request with form data

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related