带有正确标头的预检响应不成功答案

【问题标题】：Preflight response is not successful with proper headers带有正确标头的预检响应不成功
【发布时间】：2018-11-19 08:45:42
【问题描述】：

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

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

从 Postman 或实际网站发帖时，一切都按预期运行，我看到这些标头回来了，但是一旦我打开我的应用程序并发送请求，它就不再起作用了。

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 个小时，我不明白为什么它不起作用。

【问题讨论】：

您是否检查过 Chrome 开发人员工具上的网络选项卡以查看预检请求会发生什么情况？响应代码是什么，是否有正确的标头？
它只发生在 iOS 上，在我提出请求的所有其他地方，它都有效。我已将 ios 请求中的标头复制到邮递员中，效果很好。
您正在测试什么版本的 iOS？显然 iOS 12 Beta 1 中存在问题/错误：forum.ionicframework.com/t/ios-12-beta-preflight-requests-fail/…
在 iOS 12 Beta 2 中已修复此问题。干杯！

标签： php cordova ionic-framework cors ionic3

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

服务器收到OPTIONS请求后，会用什么响应？

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

【讨论】：

【解决方案3】：

解决方案非常简单，但不是很明显，我只需要在我的 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]

【讨论】：

Ionic 的常见问题解答可以更好地理解问题 ionicframework.com/docs/faq/cors。我必须指定 access-Control-allow-Origin 否则不适用于 ios。前任。 SetEnvIf Origin "^(.*)$" AccessControlAllowOrigin=$0 标头始终设置 Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

【解决方案4】：

这个问题的发生是由于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问题将得到解决

谢谢， 快乐编码

【讨论】：