如何在 Cloud Foundry 静态文件构建包中配置 CORS 策略以添加缺少的'Access-Control-Allow-Origin'标头

Question

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

访问"..."中的脚本从原产地"..."已被 CORS 策略阻止：请求的资源上不存在"访问控制允许源"标头

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

Answer 1

要使用 Staticfile Buildpack 设置 CORS，请执行以下操作：

1. 创建名为Staticfile的文件，其中包含以下内容：

   root: public
   location_include: includes/*.conf   
   

2. 确保希望应用提供的文件位于public文件夹中。

3. 使用以下内容创建文件nginx/conf/includes/headers.conf(及其父文件夹(：

   add_header 'Access-Control-Allow-Origin' '*';
   

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

有关更清楚的信息，另请参阅官方代码示例include_headers_public。

解释

截至 Staticfile Buildpack 文档：

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

(这意味着您无需在manifest.yml中指定staticfile_buildpack(

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

自定义位置

允许您使用其他指令指定自定义位置定义。

要自定义 NGINX 配置文件的位置块，请执行以下步骤。

1. 设置备用root目录。location_include属性仅与替代root结合使用。

2. 使用位置范围的 NGINX 指令创建一个文件。请参阅以下示例，该示例会导致您网站的访问者收到X-MySiteNameHTTP 标头：
   • 文件：nginx/conf/includes/custom_header.conf
   • 内容：add_header X-MySiteName BestSiteEver;

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

   例：

   root: public
   location_include: includes/*.conf
   

Answer 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 的响应标头(允许的主机和允许的方法(