华为云APIG跨域资源共享方案

浏览器的同源策略

浏览器的同源策略是一种安全机制，旨在保护用户的信息安全和隐私。它限制了一个网页的脚本只能与来自同一源的资源进行交互，即同源策略要求页面中加载的所有资源（包括脚本、样式表、图片等）必须来自相同的域名、协议、端口。

同源策略的存在是基于以下安全考虑：

• 保护用户隐私: 同源策略防止来自不同源的脚本获取用户敏感信息，比如 Cookie、LocalStorage 和 SessionStorage 等。
• 防止跨站请求伪造（CSRF）: 如果不限制跨域请求，恶意网站就可以利用用户的登录状态发起对其他网站的请求，从而导致 CSRF 攻击。
• 防止跨站脚本攻击（XSS）: 同源策略可以防止恶意网站将恶意脚本注入到另一个域上的页面中，从而避免对用户的攻击。
• 保护服务器的数据安全: 同源策略可以保护服务器的数据不被其他域的恶意脚本盗取或篡改。

虽然同源策略在保护用户安全和隐私方面非常重要，但同时它也会对一些合法的跨域资源请求造成限制，这就需要使用 CORS 等机制来安全地实现跨域资源共享。

跨域资源共享

跨域资源共享（Cross-Origin Resource Sharing，简称CORS）是一种机制，允许在一个网页应用程序中请求来自另一个域的资源，即允许在一个域上使用其他域的资源。CORS的出现是为了解决网页应用程序对其他域资源的访问受到同源策略（Same-Origin Policy）限制的问题。

同源策略是浏览器安全模型的一部分，它限制了来自不同源（域、协议或端口）的页面之间的交互。这个策略的目的是防止恶意网站利用用户登录状态、cookie 等敏感信息。虽然这在安全上是有益的，但对于某些情况下需要跨域资源访问的网页应用程序来说，这会成为一个障碍。

跨域资源共享通过在服务器端添加一些特殊的 HTTP 头部，允许浏览器绕过同源策略的限制，从而允许跨域请求。通过配置 CORS，服务器可以告诉浏览器哪些源是被允许访问资源的，以及允许的 HTTP 方法。
主要原因包括：

• 分布式架构：现代网络应用程序通常采用分布式架构，可能需要从不同的服务器获取资源，而不仅限于同一个域。
• 共享资源：某些资源可能在不同的域上，并且需要被其他域的应用程序使用。例如，图像、视频或 API。
• 合作开发：跨域资源共享也可以促进不同团队之间的合作开发，允许他们在不同的域上进行开发并共享资源。

总的来说，CORS 是为了提高 Web 应用程序的灵活性和互操作性，同时仍然保持了足够的安全性。

和跨域资源共享相关的HTTP标头字段

跨源资源共享标准新增了一组 HTTP 标头字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。分为两类：响应头字段，请求头字段。

响应头字段

• Access-Control-Allow-Origin
  语义：通知浏览器可以允许正式请求发向哪些源（origin）。
  语法：

Access-Control-Allow-Origin: *  # 通配符，允许所有源
Access-Control-Allow-Origin: <origin> # 只能为单个源，不能为多个  
Access-Control-Allow-Origin: null # 可以为null

• Access-Control-Allow-Methods
  语义： preflight request（预检请求）的返回响应头字段，定义正式请求可以向跨域服务器发送哪些请求头方法
  语法：

Access-Control-Allow-Methods: <method>, <method>, ... # 逗号隔开

• Access-Control-Allow-Headers
  语义： preflight request（预检请求）的返回响应头字段，定义正式请求可以向跨域服务器发送哪些请求头字段
  语法：

Access-Control-Allow-Headers: <header-name>[, <header-name>]* # 逗号隔开
Access-Control-Allow-Headers: * # 可以为通配符，支持正式请求传任何头字段

tips: Accept、Accept-Language、Content-Language、Content-Type（只限于解析后的值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种 MIME 类型），不需要在这个首部特意列出，默认会添加。

• Access-Control-Max-Age
  语义：表示preflight request （预检请求）的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息）可以被缓存多久
  语法：

Access-Control-Max-Age: <delta-seconds> # 单位为秒

tips: ，根据浏览器版本不同，缓存时间不同，在 Firefox 中，上限是 24 小时 （即 86400 秒）。 在 Chromium v76 之前， 上限是 10 分钟（即 600 秒)。 从 Chromium v76 开始，上限是 2 小时（即 7200 秒)。 Chromium 同时规定了一个默认值 5 秒。 如果值为 -1，表示禁用缓存，则每次请求前都需要使用 OPTIONS 预检请求。

• Access-Control-Allow-Credentials
  语义：用于在请求要求包含 credentials（Request.credentials 的值为 include）时，告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码。 浏览器仅在响应标头 Access-Control-Allow-Credentials 的值为 true 的情况下将响应暴露给前端的 JavaScript 代码。
  Credentials 可以是 cookies、authorization headers 或 TLS client certificates。
  语法：

Access-Control-Allow-Credentials: true

tips: 跨域后端响应的Access-Control-Allow-Credentials header 与前端请求的XHR 或 Fetch request中都要配置，浏览器才会允许正式请求携带credentials到跨域端

• Access-Control-Expose-Headers
  语义： 如果跨域服务器设置返回该字段，正式请求会收到该响应字段，允许服务器指示哪些正式请求的响应标头可以暴露给浏览器中运行的js脚本
  语法：

Access-Control-Expose-Headers: [<header-name>[, <header-name>]*] # 逗号分隔
Access-Control-Expose-Headers: * # 通配符，指示浏览器允许js脚本读取所有响应头

请求头字段

• Access-Control-Request-Headers
  语义： preflight request（预检请求）中，用于通知服务器在正式请求中会采用哪些请求头。
  语法：

Access-Control-Request-Headers: <header-name>, <header-name>, ...

• Access-Control-Request-Method
  语义： preflight request（预检请求）中，用于通知服务器在正式请求中会采用哪种 HTTP 方法。因为预检请求所使用的方法总是 OPTIONS ，与实际请求所使用的方法不一样，所以这个请求头是必要的。
  语法：

Access-Control-Request-Method: <method>

简单请求和非简单请求

浏览器跨域之前的请求可以分为简单请求和非简单请求两种，简单请求实现浏览器跨域仅需要一次request-response，非简单请求实现浏览器跨域需要两次request-response（含有预检请求的跨域请求都是非简单请求）

简单请求

满足如下两个条件

• 方法为 GET, HEAD, POST 其中一种，
• 除了被浏览器自动设置的请求头
  Accept, Accept-Language, Content-Language, Content-Type（只允许如下三种：text/plain, multipart/form-data, application/x-www-form-urlencoded），Range（只允许简单的范围标头值 如 bytes=256- 或 bytes=127-255）

非简单请求

不满足简单请求的条件，都是非简单请求

演示

以华为云APIG提供的跨域资源共享方案为例，来展示实现跨域的细节，

var xhr = new XMLHttpRequest();  
  
xhr.open('GET', 'https://example.com/api/data', true);  
xhr.withCredentials = true; // withCredentials 标志设置为 true，从而向服务器发送 Cookies
// 发送请求  
xhr.send();
// 处理响应  
xhr.onload = function () {  
    if (xhr.status === 200) {  
        // 打印响应头  
        for (var key in xhr.getAllResponseHeaders()) {  
            console.log(key + ': ' + xhr.getResponseHeader(key));  
        }  
          
        // 打印响应体  
        console.log(xhr.responseText);  
    } else {  
        console.error('请求失败。  返回状态为 ' + xhr.status);  
    }  
};  
// 处理网络错误  
xhr.onerror = function () {  
    console.error('网络错误');  
};  

参考文档

CORS官方文档
华为云apig官方文档