如何为Azure静态Web Apps（预览版）配置CORS

别担心，Azure静态Web Apps预览版确实没有专门的CORS配置界面，但我们可以通过它的核心配置文件轻松搞定这个问题，步骤很清晰：

• 首先，在你的项目根目录创建（如果还没存在）一个名为staticwebapp.config.json的文件——这是静态Web Apps用来管理各种自定义规则的核心配置文件，很多界面上没提供的配置都靠它实现。

• 打开这个文件，添加CORS相关的配置节点，参考下面的示例按需调整：

{
  "cors": {
    "allowedOrigins": ["https://your-client-site.com", "https://another-allowed-site.com"],
    "allowedMethods": ["GET", "HEAD"],
    "allowedHeaders": ["Content-Type"],
    "allowCredentials": false,
    "maxAge": 86400
  }
}

我给你拆解下每个配置项的作用：

• allowedOrigins：必填项，填你允许跨域访问的站点域名，支持通配符（比如https://*.your-domain.com），如果测试阶段想允许所有来源可以用["*"]，但生产环境千万别这么做，会有安全风险。

• allowedMethods：指定允许的HTTP请求方法，静态资源一般GET/HEAD就够了，根据你的实际需求调整。

• allowedHeaders：如果你的请求需要携带自定义头，在这里列出来，比如Authorization。

• allowCredentials：如果你的请求需要携带Cookie或者认证信息，就设为true，否则保持false。

• maxAge：设置预检请求（OPTIONS）的缓存时长，单位是秒，设置长一点可以减少浏览器发送预检请求的次数，提升性能。

• 配置好之后，把这个文件提交到你的代码仓库，然后触发一次重新部署（或者等自动部署触发），新的CORS规则就会生效了。

补充一句：如果只是单纯的静态JS文件跨域引用，理论上默认应该允许，但如果出现CORS错误，大概率是请求带了特殊头或者有其他自定义逻辑，上面的配置就能覆盖这种场景。

内容的提问来源于stack exchange，提问作者Serge van den Oever