Ionic 3 http post请求无效的HTTP状态代码403，而jQuery ajax post工作正常答案

【问题标题】：Ionic 3 http post request invalid HTTP status code 403 while jQuery ajax post is working perfectlyIonic 3 http post请求无效的HTTP状态代码403，而jQuery ajax post工作正常
【发布时间】：2017-10-10 17:40:48
【问题描述】：

我正在开发一个移动应用程序。我需要从 WordPress 网站获取一些数据，但 http 请求总是通过错误 对预检的响应具有无效的 HTTP 状态代码 403

打字稿

this._http.post('http://www.example.com/wp-admin/admin-ajax.php',{
      'action' : 'get_votes',
      'postId' : 123456
    })
    .subscribe(data=>{
      console.log(data);
    },error=>{
     console.log(error);
    })

jQuery

同样的事情在本地服务器上的 jQuery 中工作

$.ajax({
                url: 'http://www.example.com/wp-admin/admin-ajax.php',
                type: 'post',
                dataType: 'JSON',
                data: {
                    'action': 'get_votes',
                    'postId': 123456
                },
                success: function(result) {
                    console.log(result);
                },
                error: function(error) {
                    console.log(error);
                }
            });

cordova-plugin-whitelist 已安装。

config.xml

<access origin="*" />
   <allow-intent href="http://*/*" />
   <allow-intent href="https://*/*" />

【问题讨论】：

标签： ajax wordpress cordova ionic3 angular2-http

【解决方案1】：

如果您使用web browser 进行测试，则需要允许web browser 的源访问。使用chrome使用插件并配置它https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

如果您使用的是真实设备，但仍然无法正常工作，请尝试将header('Access-Control-Allow-Origin: *'); 与您的服务器端 API 文件一起使用。

更多信息here.

【讨论】：

我已经安装了chrome插件。 header('Access-Control-Allow-Origin: *'); 也存在于 API 中。我不知道角度 http 不起作用。但是这个插件cordova-plugin-advanced-http 运行良好。

【解决方案2】：

这是一个 CORS（跨域）问题。您的浏览器（不是 Angular）在发送实际的 POST 请求之前发送了一个 OPTIONS 请求。实际上，您的服务器将 OPTIONS 请求丢弃为未经过身份验证（或在您的情况下被禁止）。请阅读this 答案以获取更多信息。

您是否尝试将“content-type”标头设置为“application/x-www-form-urlencoded”或“multipart/form-data”？我认为这会导致浏览器在发送 POST 请求之前不发送 OPTIONS 请求。因此，即使您解决了第一个问题（缺少 OAuth 标头），您可能仍然无法 POST，因为第二个问题。

您也可以尝试安装Chrome Allow-Control-Origin extension。

【讨论】：

【解决方案3】：

您可以使用离子代理来解决 CORS 问题，

ionic.config.json

"proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://www.example.com/wp-admin/admin-ajax.php"
    }
  ]

你叫它this.http.post("/api")

【讨论】：