如何修复WordPress中的CORS错误？

只要您以简单的方式使用WordPress网站，它就可以完美运行。当您想要添加其他功能和第三方脚本时，它会给您带来不同类型的错误。在我们之前的文章中，我们已经解释了使用Cloudflare时发生WP-Cron的问题。同样，CORS错误是许多用户难以修复的另一个流行的WordPress错误。

在本文中，我们将探讨什么是CORS以及如何修复WordPress中的CORS错误。

什么是CORS？

CORS代表跨域资源共享。默认情况下，Web浏览器使用同源安全策略允许源自同一服务器的所有请求。以下是来自Wikipedia的同源策略的精确定义：

根据该政策，网络浏览器允许包含在第一个网页中的脚本访问第二个网页中的数据，但前提是两个网页具有相同的来源。——维基百科

现在您可以轻松理解跨域的目的。它允许您从另一个域或服务器成功加载脚本和其他资源。下面是一张来自MDN的精美图片，解释了同源请求和跨源请求的概念。

CORS示例和查看错误

假设您正在打开一个页面https://site1.com/page1 ，该页面具有嵌入式JavaScript并从https://site2.com/page2调用它。CORS会告诉浏览器站点1是否允许来自站点2的跨域请求。否则，浏览器将阻止该请求并在控制台中显示与CORS相关的错误。

CORS的最佳示例是在您的网站上使用来自第三方域的广告脚本。如果您在服务器上不允许CORS，Chrome、Firefox、Safari和Edge等浏览器将阻止广告脚本。当您看到页面上没有加载广告或任何其他输出时，右键单击页面并选择“检查”选项。这将打开浏览器的开发者控制台并转到“控制台”部分。

您将看到显示403、401状态代码或没有状态代码的错误的不同类型的错误。例如，下面是谷歌浏览器中显示的控制台错误，错误清楚地表明“Access to XMLHttpRequest at ‘……’ from origin ‘…..’ has been blocked by CORS policy”。您还可以看到错误旁边的原因，指出“The  ‘Access-Control-Allow-Origin’ header has a value ‘…..’ that is not equal to the supplied origin.”

Google Chrome中的CORS错误

在Mac Safari浏览器中打开同一页面时，将显示不同的错误，如下所示。它将错误显示为“Origin ‘….’ is not allowed by Access-Control-Allow-Origin. Status code: 401”。您还可以看到诸如“XMLHttpRequest cannot load ‘…..’ due to access control checks”之类的错误。

Safari浏览器中的CORS错误

每当您看到与访问控制检查相关的控制台错误时，您可以放心地假设它们与CORS问题有关。结果，您的脚本将无法加载，您将看不到页面上的广告或预期结果。

修复WordPress中的CORS错误

现在您了解了什么是CORS以及如何在浏览器控制台中查找相关错误。下一步是修复错误，以便您的页面在浏览器上加载时不会出现任何错误。简单来说，您必须在.htaccess文件中添加以下代码，以允许在您的服务器上进行跨域资源共享。

Access-Control-Allow-Origin: *

根据场景，您可以通过三种不同的方式实现此目的。

1. 允许所有站点

这是允许CORS的最常见方式。如果您想在您的站点上允许任何第三方服务器请求，请在您的htaccess文件中添加以下代码。* 用作允许任何第三方域的通配符。

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

2.允许特定域

不建议使用上述方法，因为任何劫持者都可能在您的网站上注入恶意脚本文件并造成麻烦。正确的做法是只允许来自您需要的域的跨域资源共享。您可以将 * 替换为域的名称，如下所示：

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: https://site2.com
</ifModule>

不幸的是，这并不容易，因为您需要服务器端编码来验证标头访问控制中允许的域。因此，许多WordPress用户使用选项 #1，因为它不需要任何额外的编码。

3.允许来自所有服务器的特定文件

最后一个选项是限制您要允许来自第三方服务器的文件类型。为此，您可以使用以下代码指示htaccess文件中允许的文件类型。

<IfModule mod_headers.c>
  <FilesMatch "\.(png|css|js)$">
    Header set Access-Control-Allow-Origin: *
  </FilesMatch>
</IfModule>

此代码将允许来自任何服务器的PNG图像、CSS和JS文件。您可以添加字体和其他图像文件类型以允许它们在CORS中使用。

其他注意事项

在WordPress中允许跨域资源共享时，您可能需要注意一些额外的注意事项。

• 一些托管公司需要您禁用他们的缓存才能使CORS正常工作。例如，如果您在SiteGround上，则需要在“站点工具 > 速度 > 缓存”部分下禁用NGINX直接交付。
• 当使用Cloudflare或任何其他具有缓存设置的CDN时，您可能需要完全清除缓存，以使更改从源服务器中反映出来。
• 在使用HTTP和HTTPS协议时，CORS也会产生问题。这通常会在浏览器控制台中显示为混合内容错误，您需要在您的站点上强制使用HTTPS以阻止其他协议。
• 另一个考虑是从子域向主域提供静态资源和其他资源。这将完美地工作，因为子域和主域通常都在同一个源服务器上。但是，根据服务器上的设置，它也可能会产生问题。您可以通过特别提及子域来解决此问题，如上面选项 #2 中所述。