边缘安全加速：配置跨域资源共享

什么是跨域资源共享

跨域资源共享CORS（Cross-Origin Resource Sharing）简称跨域访问，是HTML5提供的标准跨域解决方案，允许网页从不同源加载和访问跨域资源，使得跨域数据传输得以安全进行。更多信息可以参考跨域资源共享。

为什么要配置跨域资源共享

由于安全限制，浏览器一般会遵循同源策略（Same-Origin Policy），限制脚本发起的从不同域、子域、协议或端口加载和访问资源的请求，例如example.com无法访问example.org上的资源。通过配置跨域资源共享，可以在ESA上配置节点HTTP响应头，为匹配的用户请求返回对应的HTTP响应头部，实现跨域资源的加载和访问。

数据交互示意图

未开启跨域共享

1. Client向example.com发出请求，例如：http://example.com/index.html，example.com给client响应了文件index.html，但index.html通过脚本发起了请求：http://example.org/api。

2. Client向example.org发起请求时，携带了Origin：example.com，由于未开启跨域共享，ESA默认不返回跨域头，由于跨域限制，浏览器将拦截此请求的响应，导致报错（页面展示异常，显示"No 'Access-Control-Allow-Origin' header is present on the requested resource"错误）。

开启跨域共享后

1. Client向example.com发出请求，例如：http://example.com/index.html，example.com给client响应了文件index.html，但index.html通过脚本发起了请求：http://example.org/api。

2. Client向example.org发起请求时，携带了Origin：example.com，开启跨域共享后，ESA将会返回配置的跨域头，如：Access-Control-Allow-Origin:http://example.com。

3. Client收到响应后，检查跨域响应头为http://example.com，满足跨域共享访问策略，即可显示相应结果。

注意事项

若使用OSS作为源站，OSS与ESA控制台同时配置CORS，ESA的配置将覆盖OSS的配置。OSS相关的跨域配置，请参见跨域设置。

开启跨域资源共享

1. 登录ESA控制台。

2. 在左侧导航栏，单击站点管理。

3. 在站点管理页面，单击目标站点名称，或对应站点操作列的详情。

4. 在左侧导航栏，选择规则 > 转换规则。

5. 单击修改响应头页签。

6. 单击新建规则，填写规则名称并根据需求设置要匹配的用户请求及修改返回客户端的响应头的具体配置。

   参数	示例
   操作方式	添加
   响应头名称	Access-Control-Allow-Origin
   响应头值	填写Access-Control-Allow-Origin响应头对应的值为：* 说明 响应头值配置为“*”时，表示任意来源。 响应头值非“*”的情况下，必须包含协议头“http://”或者“https://”。

   说明

   • 对于“非简单请求”，您可能还需要添加Access-Control-Allow-Methods、Access-Control-Allow-Headers等响应头，更多信息可以参考跨域资源共享相关信息。

   • 禁止配置“ali-”或者“Ali-”开头的响应头名称。

   • 一个请求头参数中可以配置多个值，多个值用英文逗号（,）分隔。

7. 单击确定。

配置示例