php - 带有正确 header 的预检响应不成功

Question

我在让我的 ionic 应用程序发布到我的 API 时遇到问题。在我的 api 上，我设置了以下 header :

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

从 Postman 或实际网站发帖时，一切都按预期运行，我看到这些 header 返回，但一旦我打开我的应用程序并发送请求，它就不再有效。

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

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

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

这个问题的发生是由于 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"

特征

首选项名称="CordovaWebViewEngine"值="CDVWKWebViewEngine"

首选项名称="WKWebViewOnly"值="true"

完成所有这些操作后，当您尝试运行应用程序并点击一些 api 调用时，您将遇到由于 CORS 而导致的预检问题，因此需要解决该问题。只需运行以下命令

• ionic cordova 插件添加 cordova-plugin-wkwebviewxhrfix

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

谢谢，快乐编码