在 Visual Studio/IIS Express 中运行此 JavaScript 时如何避免 CORS 错误？

Question

我知道在我们的 QA 和生产环境中，我们的系统管理员可以添加 CORS 配置来允许这些请求。在 Visual Studio 2022 中进行开发并使用 IIS Express 时，我可以采取哪些措施来避免引发本地 CORS 错误？

<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 中的（但在进行 QA 之前我可能会删除它）：

      <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>

蒂亚！

Answer 1

<add name="Access-Control-Allow-Origin" value="https:foobar.com https://foobaz.com" />

根据您的部分配置代码，我认为您想为

Access-Control-Allow-Origin

标头设置多个域值，对吧？

但是正如文档中提到的：Access-Control-Allow-Origin，标头值只允许设置为

*

/单个域名。用空格分隔多个域名并不会使它们全部有效。

将可能的 Access-Control-Allow-Origin 值限制为一组允许的来源需要服务器端的代码来检查 Origin 请求标头的值，将其与允许的来源列表进行比较，然后确定 Origin 值是否为在列表中，将 Access-Control-Allow-Origin 值设置为与 Origin 值相同的值。

在你的情况下，你可以尝试这种方式，它应该适合你，只需参考这个答案：Enable Access-Control-Allow-Origin for multiple fields in Node.js.