Angular2 Http没有发送带有表单数据的POST请求

Question

我在stackoverflow上发布了两次这个问题，我得到了一些不理解问题的人的投票。

问题

Moltin api要求发送到路由https://api.molt.in/oauth/access_token的帖子请求中的正文数据仅作为application/x-www-form-urlencoded ，它不支持application/json ，不要问我为什么因为我不知道。

所以我需要发送一个带有angular2的帖子请求来完成所有这些，所以我使用下面的代码。

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');
  });

但上面的代码永远不会工作，formdata被错误地解析，所以服务器返回错误

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.

抛出此错误的原因是因为在预检期间，浏览器发送OPTIONS请求，服务器不会确认该请求。

我也尝试使用JSON.stringify(body)对正文值进行字符串化，但这没有用。

PS我有解决方案，这就是我发这篇文章的原因，以便其他人可以从中受益，我将在下面发布

另请注意：我使用的是第三方API，无法修改任何内容

Answer 1

在搜索了几个小时的文档之后，我找到了URLSearchParams并决定尝试一下，看看它是否有效。

以下是最终解决方案

 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');
  });

Answer 2

@James，实际上你需要在你的WebApi项目中启用Access-Control-Allow-Origin。 您要在webconfig文件下添加以下代码。

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