Visual Studio 2022/IIS Express开发时如何规避JS的CORS错误？

我了解QA和生产环境中管理员可通过配置CORS允许相关请求，但使用Visual Studio 2022搭配IIS Express开发时，该如何避免本地出现CORS错误？

相关代码 #

JavaScript初始化代码 #

<script type='text/javascript'>
    function initEmbeddedMessaging() {
        try {
            embeddedservice_bootstrap.settings.language = 'en_US';

            embeddedservice_bootstrap.init(
                'someHexValue',
                'Some_Embedded_Service_deployment',
                'https://foobar.com/somepath',
                {
                    scrt2URL: 'https://foobaz.com'
                }
            );
        } catch (err) {
            console.error('Error loading Embedded Messaging: ', err);
        }
    };
</script>
<script type='text/javascript' src='https://foobar.com/somepath/assets/js/bootstrap.min.js' onload='initEmbeddedMessaging()'></script>

控制台错误信息 #

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://foobaz.com/embeddedservice/v1/embedded-service-config?orgId=someHexValue&esConfigName=Some_Embedded_Service_deployment&language=en_US. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Uncaught (in promise) Error: Unable to load Embedded Messaging configuration.
    h https://foobar.com/ESWAbleEmbeddedService1715712189606/assets/js/bootstrap.min.js:145

已尝试的web.config配置 #

<httpProtocol>
    <customHeaders>
        <remove name="X-Aspnet-Version" />
        <remove name="X-Aspnetmvc-Version" />
        <remove name="X-Powered-By" />
        <remove name="x-powered-by" />
        <remove name="x-aspnet-version" />
        <remove name="x-aspnetmvc-version" />
        <add name="Access-Control-Allow-Origin" value="https:foobar.com https://foobaz.com" />
        <add name="Access-Control-Allow-Methods" value="GET" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
</httpProtocol>

问题本质 #

你之前的配置方向错误：CORS规则要求被请求的目标服务器（这里是https://foobaz.com）返回Access-Control-Allow-Origin头，允许你的本地开发域名（如https://localhost:xxxx）。而你在自己项目的web.config中添加的CORS头，是给你的本地站点对外的响应添加的，对向foobaz.com发起的请求完全无效。

可行的本地解决方案 #

1. 浏览器临时禁用CORS（仅限测试） #

适合快速验证功能，不推荐日常开发使用（有安全风险）：

• Chrome/Edge：右键浏览器快捷方式，在目标字段末尾添加参数：

  --disable-web-security --user-data-dir="C:\TempChromeDev"
  

  启动后浏览器会提示“使用了不受支持的命令行标记”，此时同源策略检查被禁用。

2. 用代理工具修改响应头（推荐） #

通过Fiddler拦截请求，自动给foobaz.com的响应添加允许本地域名的CORS头：

Fiddler配置步骤：

1. 打开Fiddler，点击顶部菜单 Rules > Customize Rules
2. 在脚本文件中找到OnBeforeResponse方法，添加以下代码（替换成你的本地开发域名）：

   if (oSession.HostnameIs("foobaz.com")) {
       // 替换为你的本地开发地址，例如https://localhost:44300
       oSession.ResponseHeaders.Add("Access-Control-Allow-Origin", "https://localhost:44300");
       // 如果需要携带凭证，添加此行
       // oSession.ResponseHeaders.Add("Access-Control-Allow-Credentials", "true");
   }
   

3. 保存脚本，Fiddler会自动生效，之后本地请求foobaz.com时会被自动加上合法的CORS头。

3. 申请测试环境CORS配置 #

如果有foobaz.com的测试环境，联系管理员将你的本地开发域名（如https://localhost:xxxx）添加到该服务器的Access-Control-Allow-Origin允许列表中，这样本地请求就能直接获得合法的CORS响应头。

4. 本地搭建反向代理 #

通过IIS Express的URL重写模块，将对foobaz.com的请求代理到本地，再由本地服务器添加CORS头：

1. 安装IIS的URL重写和Application Request Routing模块
2. 在项目web.config中添加以下配置（替换本地域名）：

   <rewrite>
       <rules>
           <rule name="Proxy to foobaz">
               <match url="^embeddedservice/(.*)" />
               <action type="Rewrite" url="https://foobaz.com/embeddedservice/{R:1}" />
           </rule>
       </rules>
       <outboundRules>
           <rule name="Add CORS Header">
               <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern=".*" />
               <action type="Rewrite" value="https://localhost:44300" />
           </rule>
       </outboundRules>
   </rewrite>
   

3. 修改JavaScript代码中的scrt2URL为本地路径：

   scrt2URL: '/embeddedservice'
   

   这样请求会先到本地服务器，再代理到foobaz.com，同时本地服务器给响应添加CORS头。

内容的提问来源于stack exchange，提问作者Nosnetrom