如何在 Cloud Foundry Staticfile Buildpack 中配置 CORS 策略以添加缺少的“Access-Control-Allow-Origin”标头答案

【问题标题】：How to configure CORS policy in Cloud Foundry Staticfile Buildpack to add missing 'Access-Control-Allow-Origin' header如何在 Cloud Foundry Staticfile Buildpack 中配置 CORS 策略以添加缺少的“Access-Control-Allow-Origin”标头
【发布时间】：2019-10-16 08:19:44
【问题描述】：

当我尝试使用 Staticfile Buildpack 访问托管在 Cloud Foundry 上的 JavaScript 文件时，我的浏览器拒绝加载它并在控制台中显示一条错误消息：

CORS 策略已阻止从源“...”访问“...”处的脚本：请求的资源上不存在“Access-Control-Allow-Origin”标头

如何在 Cloud Foundry Staticfile Buildpack 中配置跨域资源共享 (CORS)？

【问题讨论】：

标签： cors cloud-foundry static-files

【解决方案1】：

使用静态文件构建包设置 CORS：

创建一个名为Staticfile 的文件，内容如下：

 root: public
 location_include: includes/*.conf

确保您希望应用提供的文件位于 public 文件夹中。
使用以下内容创建文件nginx/conf/includes/headers.conf（及其父文件夹）：
```
  add_header 'Access-Control-Allow-Origin' '*';
```

就是这样！在您的下一个 cf push 之后，将设置 CORS 标头。

为了更清楚，另见官方代码示例include_headers_public。

说明

截至Staticfile Buildpack documentation：

如果您创建一个名为 Staticfile 的文件并将其定位在应用的构建目录中，Cloud Foundry 会在您推送应用时自动使用 Staticfile buildpack。

（这意味着您不需要在manifest.yml 中指定staticfile_buildpack）

然后按照Custom Location 下的说明进行操作。

自定义位置允许您使用附加指令指定自定义位置定义。

要自定义 NGINX 配置文件的位置块，请按照以下步骤操作。

设置备用root 目录。 location_include 属性只能与替代的 root 结合使用。

使用位置范围的 NGINX 指令创建文件。请参阅以下示例，它会导致您网站的访问者收到 X-MySiteName HTTP 标头：

文件：nginx/conf/includes/custom_header.conf

内容：add_header X-MySiteName BestSiteEver;

将 Staticfile 中的 location_include 变量设置为上一步中文件的路径。此路径相对于nginx/conf。

例子：
 root: public
 location_include: includes/*.conf

【讨论】：

在 Location 末尾的答案中似乎有错字，还有额外的 '%' 无法正常工作。相反，它应该只是'location_include：includes/*.conf'。这行得通。我正是在寻找这个。谢谢！

【解决方案2】：

一点历史 - 通过这个故事实现到静态构建包 - https://www.pivotaltracker.com/n/projects/1042066/stories/136370663

针对 BuildPack 团队提出了类似问题 - https://github.com/cloudfoundry/staticfile-buildpack/issues/89

请参阅以下示例应用程序了解如何配置任何其他自定义标头 - https://github.com/cloudfoundry/staticfile-buildpack/tree/master/fixtures/include_headers_public

您还可以另外添加 CORS 特定的响应标头（允许的主机和允许的方法）

【讨论】：