预检响应具有无效的 HTTP 状态代码 401 预检选项调用错误答案

【问题标题】：Response for preflight has invalid HTTP status code 401 preflight OPTION call error预检响应具有无效的 HTTP 状态代码 401 预检选项调用错误
【发布时间】：2018-06-10 14:15:13
【问题描述】：

我正在使用 Ionic 3 框架项目，每当我尝试通过POST 方法（如postAsync）将我的数据发送到服务器时遇到一个错误，这与错误所述的 OPTION 调用有关：

预检响应包含无效的 HTTP 状态代码 401

我不知道如何解决这个错误，因为我在浏览器中添加了CORS 扩展，但我仍然面临这个错误问题。

是否有任何解决方案可以从浏览器端解决这个问题，比如从 chrome devtools，因为我可以通过 -mode:OPTIONS 从网络过滤它，但在控制台我遇到了同样的错误。
如果这不可能，那么如何解决这个错误？

代码：

this.WooCommerce.postAsync('customers', customerData).then( (data) => {...}

更多错误信息：

polyfills.js:3 选项 tusharstar.freesite.host/wc-api/v3/……401 （未经授权）（匿名）@ polyfills.js:3 ...（索引）：1 失败 load tusharstar.freesite.host/wc-api/v3/...) 预检响应有无效的 HTTP 状态代码 401 bluebird.js:1545 未处理的拒绝 TypeError: 获取失败

【问题讨论】：

请向我们展示您的尝试。
实际上，我在使用 Ionic 3 和 woocommerce，所以我的代码是这样的，“this.WooCommerce.postAsync('customers', customerData).then((data) => {.. .}" 现在，每当我尝试通过单击按钮将数据发布到服务器时，我都会收到此错误。我已经在我的 chrome 浏览器中添加了 CORS 扩展，并再次添加了邮递员扩展。
@nkr 只是添加我得到的详细错误是，' polyfills.js:3 OPTIONS tusharstar.freesite.host/wc-api/v3/…... 401 (Unauthorized) (anonymous) @ polyfills.js:3 ...（索引）：1 无法加载 tusharstar.freesite.host/wc-api/v3/…）预检响应具有无效的 HTTP 状态代码 401 bluebird.js:1545 未处理的拒绝类型错误：无法获取'

标签： woocommerce ionic3 preflight

【解决方案1】：

在谷歌搜索了很多之后，我的意思是很多，我的第一点的答案是肯定的！这完全是关于网络安全问题/预防措施，它让开发人员使用 chrome 浏览器获取 OPTION 调用的错误/预防措施。解决问题的简单方法（仅用于开发目的）是禁用浏览器的网络安全，使用禁用的网络安全 .exe 的新扩展名重新启动 chrome，一切都会正常工作。 windows用户步骤： 1.关闭镀铬。 2.打开cmd 3.添加此代码： C:/Program File/Google/Chrome/Application>chrome.exe --disable-web-security --user-data-dir="D:\chrome"

【讨论】：

【解决方案2】：

你可以很容易地度过这个难关！现在就跟着我吧

在桌面上创建快捷方式
右键单击快捷方式，然后单击属性
编辑目标属性

将其设置为“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”--5。 disable-web-security --user-data-dir="C:/ChromeDevSession"
在 VIsual Studio Code 中，运行 ionic serve -l
你会看到新标签打开http://localhost:8100/ionic-lab。你应该知道这个链接是在普通的 chrome 选项卡中打开的，而不是我们设置的“disable-web-security”chrome。
双击我们设置的快捷方式打开“disable-web-security”chrome 选项卡。然后将http://localhost:8100/ionic-lab 粘贴到此选项卡中。

因此，我们在使用 woo-commerce-api 时遇到多个错误的原因是 Google 的“网络安全”。然后你只需禁用它，你实际上不需要任何 CORS 扩展。因此，如果您已安装，请立即删除它们。

我为学习这门课程的人写了这个解决方案https://www.udemy.com/ionic-3-apps-for-woocommerce-build-an-ecommerce-mobile-app/。这是一个离子电子商务应用程序，它使用 woo-commerce-api 从 Wordpress（本地或实时服务器）设置和获取数据。如果您在使用其他非离子语言时遇到问题，它仍然可以正常工作。

实际上，我在 Google 上进行了很多搜索以找到此解决方案。我希望这对你们所有人都有帮助。现在，我要睡觉了，因为明天我和我的讲师有一个关于这个离子项目的最终报告?

再见！归乐

【讨论】：

【解决方案3】：

我遇到了同样的问题，我通过在 WordPress 根路径 (C:\xampp\htdocs\wordpress) 的 .htaccess 文件顶部添加几行代码解决了这个问题

将此代码添加到 .htaccess 文件的顶部：

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $l [R=200,L]

【讨论】：