配置跨域资源共享

什么是跨域资源共享

跨域资源共享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. 在则执行…区域，添加响应头。

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

   说明

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

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

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

6. 单击确定。

配置示例