Question

我遇到了将我的离子应用程序发送到我的API的问题。在我的api上，我设置了以下标题：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS");

当从邮递员或实际网站发布时，一切都按预期运行，我看到这些标题回来但是一旦我打开我的应用程序并发送请求，它就不再有效了。

GET请求工作正常，只是POST请求被破坏。我使用以下内容在我的应用上发送帖子请求：

 /**
  * Post to the API
  * @param path    Where to go
  * @param params  What to send
  */
 private post(path, params): Promise<any> {
   return this.http
     .post(this.apiUrl + path, params)
     .toPromise()
     .then(r => r.json());
 }

我的离子应用程序中出现以下错误

Failed to load resource: Preflight response is not successful
XMLHttpRequest cannot load https://mmcalc.com/api/calculate. Preflight response is not successful

我现在已经把头发拉了近15个小时了，我不明白为什么它不起作用。

Answer 1

如果您只是在iOS中遇到此问题，那么这听起来像是WKWebView的问题

https://ionicframework.com/docs/wkwebview/

当服务器收到OPTIONS请求时，它会响应什么？

我会确保OPTIONS请求的响应包含WKWEBView期望的标头，否则会阻止代码进行调用。

Answer 2

解决方案非常简单，但不是很明显，我只需要在我的API上设置正确的标头。 This文章为我解决了这个问题，非常简单。

# Always set these headers.
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

# Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Answer 3

发生此问题的原因主要是 WKWebView

因此，在Ionic中使用WKWebView的非常简单的方法是，您必须通过运行以下命令从插件中卸载以前安装的 UIWebView 。

ionic cordova插件删除cordova-plugin-ionic-webview

然后尝试使用此命令添加 WKWebView 插件

ionic cordova插件添加cordova-plugin-wkwebview-engine

安装 WkWebView 插件后，接下来要做的就是在config.xml文件中添加以下行

功能名称=“ CDVWKWebViewEngine”

param name =“ ios-package” value =“ CDVWKWebViewEngine”

功能

preference name =“ CordovaWebViewEngine” value =“ CDVWKWebViewEngine”

preference name =“ WKWebViewOnly” value =“ true”

完成所有这些操作后，当您尝试运行该应用程序并单击一些api调用时，由于CORS，您将收到预检问题，因此可以对其进行修复。只需运行以下命令

ionic cordova插件添加cordova-plugin-wkwebviewxhrfix

添加上述插件后，CORS问题将得到解决

谢谢， 快乐编码

Answer 4

预检请求使用OPTIONS请求方法。您应确保您的API端点返回OPTIONS请求方法的成功状态代码，并且响应还应包括您在上面提到的CORS标头。 GET请求可能正在运行，因为他们不需要预先请求。我想在你的情况下，OPTIONS方法返回错误的状态代码。

使用正确的标题，预检响应不成功

4 个答案: