Azure 网站上的 HTTP 选项请求由于 CORS 而失败


HTTP OPTIONS request on Azure Websites fails due to CORS

我最近将我们的服务器从Rackspace CloudSites(在Apache/Linux上运行(转移到Windows Azure网站。自迁移以来,由于 CORS,REST API 上的所有 jQuery AJAX 请求都开始失败。

我们使用自定义标头,因此 jQuery 在运行实际的 API 调用之前发出预检 HTTP OPTIONS 请求。问题是 OPTIONS 请求似乎没有到达我的 PHP 代码,而是由我似乎无法控制的其他实体(显然是 Web 服务器(返回的。

我已经使用以下标头几年了,所以我很确定问题不在 PHP 代码中:

<?php
    $this->output->set_header("Access-Control-Allow-Origin: *");
    $this->output->set_header("Access-Control-Allow-Methods: GET,POST,DELETE,HEAD,PUT,OPTIONS");
    $this->output->set_header("Access-Control-Allow-Headers: X-Olaround-Debug-Mode, Authorization, Accept");
    $this->output->set_header("Access-Control-Expose-Headers: X-Olaround-Debug-Mode, X-Olaround-Request-Start-Timestamp, X-Olaround-Request-End-Timestamp, X-Olaround-Request-Time, X-Olaround-Request-Method, X-Olaround-Request-Result, X-Olaround-Request-Endpoint" );
?>

我猜这个问题特定于Azure网站,因为代码似乎在我的开发机器(Windows 8/IIS 8.0(上也能正常工作。我是Azure(以及一般基于Windows的托管(的新手,所以我几乎不知道如何处理和调试这个问题,因为Azure网站允许非常小的控制。

我决定发布这个问题的完整解决方案,因为已经提供的答案(虽然技术上正确(在这种特殊情况下对我来说不起作用。诀窍是执行以下操作:

1. 在 web.config 的<httpProtocol>中添加<customHeaders>

就像@hcoat上面建议的那样,添加system.webServer.httpProtocol.customHeaders是解决问题的第一步(我之前已经自己尝试过,但没有用(。在此处添加需要为 CORS 设置的所有自定义标头和 HTTP 方法。

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET,POST,DELETE,HEAD,PUT,OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Olaround-Debug-Mode, Authorization, Accept" />
        <add name="Access-Control-Expose-Headers" value="X-Olaround-Debug-Mode, X-Olaround-Request-Start-Timestamp, X-Olaround-Request-End-Timestamp, X-Olaround-Request-Time, X-Olaround-Request-Method, X-Olaround-Request-Result, X-Olaround-Request-Endpoint" />
    </customHeaders>
</httpProtocol>

2. 覆盖 PHP 的默认处理程序并删除 OPTIONSVerbHandler

下一步(@Bing Han 提供的解决方案(是删除 IIS 中定义的默认OPTIONSVerbHandler,并设置接受其他 HTTP 方法的自定义PHP54_via_FastCGI处理程序。默认处理程序仅适用于 GET、POST 和 HEAD 请求。

<handlers>
    <remove name="OPTIONSVerbHandler" />
    <remove name="PHP54_via_FastCGI" />
    <add name="PHP54_via_FastCGI" path="*.php" verb="GET, PUT, POST, DELETE, HEAD, OPTIONS, TRACE, PROPFIND, PROPPATCH, MKCOL, COPY, MOVE, LOCK, UNLOCK" modules="FastCgiModule" scriptProcessor="D:'Program Files (x86)'PHP'v5.4'php-cgi.exe" resourceType="Either" requireAccess="Script" />
</handlers>

查看这篇文章,了解有关内部工作原理的更多详细信息。

3. 删除通过应用程序代码设置的所有响应标头

这是造成最多问题的拼图的最后一块。由于IIS已经在添加<customHeaders>,我在上面的问题中分享的PHP代码片段正在复制它们。这导致了浏览器级别的问题,无法很好地响应同一类型的多个标头。

解决此问题的最终web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Imported Rule 1" stopProcessing="true">
                    <match url="^(.*)$" ignoreCase="false" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{R:1}" pattern="^(dir_path'.php|lolaround|lolaround'.php|app_assets)" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="lolaround.php/{R:1}" />
                </rule>
                <rule name="Imported Rule 2" stopProcessing="true">
                    <match url="lolaround/(.*)" ignoreCase="false" />
                    <action type="Rewrite" url="/lolaround.php/{R:1}" />
                </rule>
            </rules>
        </rewrite>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET,POST,DELETE,HEAD,PUT,OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Origin, X-Olaround-Debug-Mode, Authorization, Accept" />
                <add name="Access-Control-Expose-Headers" value="X-Olaround-Debug-Mode, X-Olaround-Request-Start-Timestamp, X-Olaround-Request-End-Timestamp, X-Olaround-Request-Time, X-Olaround-Request-Method, X-Olaround-Request-Result, X-Olaround-Request-Endpoint" />
            </customHeaders>
        </httpProtocol>
        <handlers>
            <remove name="OPTIONSVerbHandler" />
            <remove name="PHP54_via_FastCGI" />
            <add name="PHP54_via_FastCGI" path="*.php" verb="GET, PUT, POST, HEAD, OPTIONS, TRACE, PROPFIND, PROPPATCH, MKCOL, COPY, MOVE, LOCK, UNLOCK" modules="FastCgiModule" scriptProcessor="D:'Program Files (x86)'PHP'v5.4'php-cgi.exe" resourceType="Either" requireAccess="Script" />
        </handlers>
    </system.webServer>
</configuration>

注意:虽然@hcoat和@Bing韩的答案在这个问题上都有用,但我只能将赏金奖励给其中一个。我决定把它交给 @Bing Han,因为他的回答让我最接近解决方案(而且我无法找到从自己的搜索中添加自定义 PHP 处理程序的方法(。

更新:我已经编辑了答案以添加对HTTP DELETE方法的支持,该方法在原始答案中也缺少。

HTTP OPTIONS请求失败,因为默认的PHP-CGI处理程序不处理"OPTIONS"动词。

web.config文件中添加以下代码将解决此问题。

<configuration>
  <system.webServer>
    <!-- 
      Some other settings 
    -->
    <handlers>
      <remove name="OPTIONSVerbHandler" />
      <remove name="PHP54_via_FastCGI" />
      <add name="PHP54_via_FastCGI" path="*.php" verb="GET,HEAD,POST,OPTIONS" modules="FastCgiModule" scriptProcessor="D:'Program Files (x86)'PHP'v5.4'php-cgi.exe" resourceType="Either" />
    </handlers>
  </system.webServer>
</configuration>

我有一篇关于这个的博客文章:http://tekblg.blogspot.sg/2013/09/azure-websites-php-cross-domain-request.html

在Windows服务器上,你不能依赖php头来获取CORS文件。您需要在站点根目录或应用程序根目录中创建包含以下内容的web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
       <add name="Access-Control-Allow-Methods" value="GET,POST,DELETE,HEAD,PUT,OPTIONS" />
       <add name="Access-Control-Allow-Headers" value="X-Olaround-Debug-Mode, Authorization, Accept" />
       <add name="Access-Control-Expose-Headers" value="X-Olaround-Debug-Mode, X-Olaround-Request-Start-Timestamp, X-Olaround-Request-End-Timestamp, X-Olaround-Request-Time, X-Olaround-Request-Method, X-Olaround-Request-Result, X-Olaround-Request-Endpoint" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

此过程与设置.htaccess文件相当,关键是您可以在需要的地方创建它,而无需重新配置服务器。