来自离子 iOS 原生到 WP rest API 的 http 请求错误(适用于 Web 视图和 DevApp) [英] Error on http requests from ionic iOS native to WP rest API (works on web view and DevApp)
问题描述
我们正在尝试从我们的 ionic 应用程序向 Wordpress 服务器 (REST API) 发出 http 请求并收到以下错误:{"_body":{"isTrusted":true},"status":0,"ok":false,"statusText":"","headers":{},"type":3,"url":null}.
We are trying to issue http requests from our ionic app to a Wordpress server (REST API) and get the following error:
{"_body":{"isTrusted":true},"status":0,"ok":false,"statusText":"","headers":{},"type":3,"url":null}.
当我们使用 Web 视图或 ionic DevApp 时请求工作正常，但在 iOS 设备上失败.
The requests are working fine when we use the web view or ionic DevApp and are failing on iOS devices.
到目前为止我们做了什么:
What we did so far:
- 我们通过 DevApp 和 Web 视图验证了请求工作正常.
- 我们放宽了cordova 白名单插件(请参阅下面的config.xml).
- 我们已验证在我们的服务器上启用了 CORS(请参阅下面的 curl CORS 检查)
- 我们检查了当请求被阻止时 iOS 设备没有发出 CORS 预检请求，因为我们可以在服务器访问日志上看到 GET 请求和没有 OPTIONS 请求.
- 很明显，我们可以看到从设备到服务器的连接，因为我们可以看到 GET 请求.
如果您有任何建议，即使看起来有些牵强，我们也非常希望听到.
If you have any suggestions, even if seem far fetched, we would very much like to hear them.
感谢您的帮助！
请求代码
import { Http, Response } from '@angular/http';
...
private requestData(path: String, params:Object = {}){
return this.http.get( this.request.url + path, {
params: {
'consumer_key': this.conf.comm.appId,
'consumer_secret': this.conf.comm.appSecret
}
})
.map( (res: Response) => this.prepareResponse(res) )
.catch( (res: Response) => this.catchError(res) );
}
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="app.c***r.***" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>***</name>
<description>The ***</description>
<author email="admin@c***r.app" href="https://c***r.app">***</author>
<content src="index.html" />
<access origin="*" />
<access origin="*" subdomains="true" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="localhost:8080" />
<allow-navigation href="data:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="mailto:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
...
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
...
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-sqlite-storage" spec="3.2.0" />
<engine name="ios" spec="~4.5.5" />
<engine name="android" spec="~7.1.4" />
</widget>
卷曲 CORS 检查
* Hostname was NOT found in DNS cache
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* Trying 18.224.***.***...
* Connected to p***r.app (18.224.***.***) port 443 (#0)
* successfully set certificate verify locations:
...
* SSL certificate verify ok.
> GET /wp-json/wc/v2/products/categories?consumer_key=ck_3***2&consumer_secret=cs_0***b&per_page=100 HTTP/1.1
> User-Agent: curl/7.38.0
> Host: p***r.app
> Accept: */*
> Origin: http://localhost:8080
>
< HTTP/1.1 200 OK
< Date: Fri, 12 Apr 2019 14:44:43 GMT
* Server Apache is not blacklisted
< Server: Apache
< X-Powered-By: PHP/7.0.31
< X-Robots-Tag: noindex
< Link: <https://p***r.app/wp-json/>; rel="https://api.w.org/"
< X-Content-Type-Options: nosniff
< Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages
< Access-Control-Allow-Headers: Authorization, Content-Type
< X-WP-Total: 98
< X-WP-TotalPages: 1
< Cache-Control: public, max-age=2592000
< Allow: GET
< Access-Control-Allow-Origin: http://localhost:8080
< Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE
< Access-Control-Allow-Credentials: true
< Vary: Origin
< X-Frame-Options: SAMEORIGIN
< Transfer-Encoding: chunked
< Content-Type: application/json; charset=UTF-8
<
推荐答案
该问题是由 ionic 发送 ionic://localhost 作为已编译应用程序使用时的来源引起的.WP REST 通过 rest_send_cors_headers 响应，它通过 esc_url_raw 并根据其协议拒绝该网址.
The problem was caused by ionic sending ionic://localhost as the origin when used as a compiled app. WP REST responds through rest_send_cors_headers, which passes the origin through esc_url_raw and rejects the url due to its protocol.
要解决这个问题，只需通过过滤器kses_allowed_protocols将协议ionic添加到允许的协议列表中.
To fix this just add the protocol ionic to the allowed protocols list through the filter kses_allowed_protocols.
顺便说一句，如果您来自 ionic 并且正在阅读本文，请考虑使已编译的应用程序的行为尽可能接近 Web 视图和 DevApp，包括发送到服务器的源.
BTW, if you're from ionic and reading this, consider making the compiled apps behave as close as possible to the web view and DevApp, including origins sent to the servers.
这篇关于来自离子 iOS 原生到 WP rest API 的 http 请求错误(适用于 Web 视图和 DevApp)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
