使用 MVC 5 在 Localhost 上使用 IISExpress 的 Ajax POSTing 和 CORS 预检错误

Posted 2023-03-04

【中文标题】使用 MVC 5 在 Localhost 上使用 IISExpress 的 Ajax POSTing 和 CORS 预检错误

【英文标题】：Ajax POSTing and CORS preflight error with IISExpress on Localhost using MVC 5

【发布时间】：2021-07-11 05:58:29

【问题描述】：

我正在本地主机上使用 Visual Studio 和 IIS Express 测试对外部地址的 Ajax 请求。 （我已经使用 Fiddler 测试了这个请求，它工作正常！）

当我运行它时，我在浏览器 (Chrome) 控制台中看到以下内容：

Access to XMLHttpRequest at 'https://api.example.com/' from origin 'https://localhost:44306' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我搜索了 SO，并尝试添加以下内容：

<system.webServer>  
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,HEAD,OPTIONS" />
        <add name="Access-Control-Expose-Headers" value="*" />
        <add name="Access-Control-Request-Headers" value="*" />
        <add name="Access-Control-Request-Method" value="GET,PUT,POST,DELETE,HEAD,OPTIONS" />
        <add name="X-Frame-Options" value="DENY" />
      </customHeaders>
    </httpProtocol>
</system.webServer>  

到我项目的 web.config 和 C:\Users\xxx\Documents\IISExpress\config\applicationhost.config。我还尝试在我的 Global.asax 中添加标题，例如： void Application_PreSendRequestHeaders

我尝试将它们设置为 Ajax 请求的一部分，如下所示：

 var newDataRequest = $.ajax(
            type: "post",
            url: 'https://api.example.com/',
            crossDomain : true,
            crossOrigin: true,
            headers: 
                "Accept": "application/json",
                "Content-Type":"application/json",
                "Access-Control-Allow-Origin":"https://localhost:44306/",                    
                "Access-Control-Expose-Headers":"*",
                "Access-Control-Request-Headers":"access-control-allow-credentials,access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,access-control-expose-headers,access-control-max-age,content-type,key,x-frame-options",
                "Access-Control-Allow-Methods" : "GET,PUT,POST,DELETE,HEAD,OPTIONS",
                "Access-Control-Allow-Headers" : "Content-Type,Authorization,Accept",
                "Access-Control-Max-Age" : 1728000,
                "Access-Control-Allow-Credentials" : true,
                "X-Frame-Options":"DENY"
            ,
            data: ,
            timeout: 60000
            ).done(function (data) 
                
            ).fail(function (jqXHR, textStatus) 
               
            ).always(function (jqXHR, textStatus) 
                stopSpinner();
            );

以下是我在上面尝试过的一些参考：

Web.config customHeaders not returned in a response

Response to preflight request doesn't pass access control check (Angular2)

CORS problems in WebAPI hosted in IIS

请问还有什么建议吗？我的想法不多了！

谢谢！

【问题讨论】：

blog.lextudio.com/…

【参考方案1】：

我认为这是尝试从客户端代码（而不是服务器端代码）调用外部 API 时出现的问题。

为了在 MVC 中解决这个问题，我将我的 ajax 请求指向一个 LOCAL 操作，如下所示：

url: '@Url.Action("Action", "Controller")'

然后在action方法中（装饰有[HttpPost]属性），我使用HttpWebRequest成功地向外部API发出请求。