HTML5 `CORS`（跨域资源共享）：工作原理与解决方案

HTML5 CORS：打破浏览器“楚河汉界”，让数据自由流动

咱们先来聊个故事。话说互联网上住着两个国家：A国和B国。A国人民（网站A）想去B国（网站B）的银行（服务器）取点钱（数据），结果边境守卫（浏览器）拦住了，说：“不行！你俩不是一个国家的，没有通行证，不能随便拿别人的东西！”

这就是浏览器的“同源策略”，一个为了安全而设定的规则。它就像一道楚河汉界，把不同来源的网站隔开，防止恶意网站窃取用户数据。但有时候，我们正经网站也想跨国合作，比如A网站想用B网站的API获取天气信息，这可咋办？

这时候，CORS（Cross-Origin Resource Sharing，跨域资源共享）就闪亮登场了，它就像一张特别通行证，允许A国人民在B国银行取钱，前提是B国银行愿意配合。

一、 什么是“同源”？这很重要！

理解CORS之前，必须搞清楚啥叫“同源”。简单来说，两个网址的协议、域名、端口都相同，才算同源。

• 协议: 比如 http 和 https 就不同源。
• 域名: 比如 www.example.com 和 api.example.com 就不同源。
• 端口: 比如 www.example.com:80 和 www.example.com:8080 就不同源。

举几个例子：

• http://www.example.com/page1.html 和 http://www.example.com/page2.html 同源 (只有路径不同)
• http://www.example.com/page1.html 和 https://www.example.com/page1.html 不同源 (协议不同)
• http://www.example.example.com/page1.html 和 http://example.com/page1.html 不同源 (域名不同)
• http://www.example.com:80/page1.html 和 http://www.example.com:8080/page1.html 不同源 (端口不同)

如果你的网站尝试访问一个不同源的资源，浏览器就会启动同源策略，阻止这次访问。这就是所谓的“跨域问题”。

二、 为什么需要CORS？难道就不能老死不相往来？

当然不能！现代Web应用越来越依赖于各种API，这些API很可能来自不同的域名。比如：

• 你的网站想用第三方的地图API显示地图。
• 你想调用支付API处理用户的付款。
• 你想从新闻网站获取最新的头条新闻。

如果没有CORS，这些功能就寸步难行，互联网将变成一个孤岛群，信息无法自由流动。CORS就像一个桥梁，连接着不同的孤岛，让资源可以安全地共享。

三、 CORS的工作原理：一次握手，一次放行

CORS的秘密武器在于服务器端。客户端（浏览器）发起跨域请求时，浏览器会先发起一个“预检请求”（preflight request），就像去银行取钱前先问一句：“我可以取钱吗？”

这个预检请求使用 OPTIONS 方法，包含一些重要的信息，比如：

• Origin: 告诉服务器请求来自哪个域名。
• Access-Control-Request-Method: 告诉服务器实际请求将使用哪个HTTP方法（比如 GET、POST）。
• Access-Control-Request-Headers: 告诉服务器实际请求将包含哪些自定义的HTTP头部。

服务器收到预检请求后，会根据自身配置决定是否允许跨域访问。它会在响应头中设置一些特殊的字段，告诉浏览器：

• Access-Control-Allow-Origin: 允许哪个域名的请求访问。可以设置为具体的域名（比如 http://www.example.com），也可以设置为 *，表示允许所有域名访问（但一般不建议这么做，除非你知道自己在做什么）。
• Access-Control-Allow-Methods: 允许哪些HTTP方法。比如 GET, POST, PUT, DELETE。
• Access-Control-Allow-Headers: 允许哪些自定义的HTTP头部。
• Access-Control-Max-Age: 预检请求的有效期。浏览器会在这个时间内缓存预检请求的结果，避免每次都发送预检请求。

如果服务器的响应头中包含了以上字段，并且满足了浏览器的要求，浏览器就会认为服务器允许这次跨域访问，然后才会发送实际的请求。否则，浏览器会阻止这次请求，并在控制台中报错。

简单来说，CORS就是服务器和浏览器之间的一次“谈判”，服务器决定是否允许跨域访问，浏览器负责执行服务器的指令。

四、 解决CORS问题的几种姿势

解决CORS问题，核心在于配置服务器端。作为前端工程师，了解这些配置选项，才能更好地与后端同学协作，共同解决问题。

1. 设置 Access-Control-Allow-Origin: 这是最常用的方法。后端需要在响应头中设置 Access-Control-Allow-Origin 字段，指定允许访问的域名。

   • 允许特定域名: Access-Control-Allow-Origin: http://www.example.com 只允许来自 http://www.example.com 的请求。
   • 允许所有域名: Access-Control-Allow-Origin: * 允许来自任何域名的请求。 注意： 这种方式存在安全风险，不建议在生产环境中使用，除非你的API是公开的，不需要任何身份验证。

2. 设置 Access-Control-Allow-Methods: 指定允许的HTTP方法。

   • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS 允许客户端使用 GET、POST、PUT、DELETE 和 OPTIONS 方法发起请求。

3. 设置 Access-Control-Allow-Headers: 指定允许的HTTP头部。如果客户端在请求中使用了自定义的头部，需要在服务器端设置 Access-Control-Allow-Headers 字段，否则浏览器会阻止这次请求。

   • Access-Control-Allow-Headers: Content-Type, Authorization, X-Custom-Header 允许客户端在请求中使用 Content-Type、Authorization 和 X-Custom-Header 头部。

4. 设置 Access-Control-Allow-Credentials: 如果你的API需要验证用户身份，需要在服务器端设置 Access-Control-Allow-Credentials: true，并且在客户端的请求中设置 withCredentials: true。

   • 注意： 如果设置了 Access-Control-Allow-Credentials: true，Access-Control-Allow-Origin 不能设置为 *，必须设置为具体的域名。
5. 使用JSONP: 这是一种比较古老的跨域解决方案，利用了 <script> 标签可以跨域请求的特性。但是JSONP只能发起 GET 请求，而且存在安全风险，不建议在新项目中使用。
6. 代理服务器: 可以搭建一个代理服务器，让客户端先向代理服务器发起请求，然后代理服务器再向目标服务器发起请求。因为代理服务器和客户端是同源的，所以不存在跨域问题。这种方式比较复杂，需要额外的服务器资源。

五、 一些常见的CORS问题和解决方案

1. 预检请求失败: 浏览器控制台显示 "Response to preflight request doesn’t pass access control check" 错误。

   • 原因： 服务器端没有正确配置CORS头部，或者客户端发送的请求不符合服务器的CORS策略。
   • 解决方案： 检查服务器端的CORS配置，确保设置了 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 字段，并且满足了浏览器的要求。检查客户端的请求，确保使用了允许的HTTP方法和头部。

2. 请求被CORS策略阻止: 浏览器控制台显示 "Has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource" 错误。

   • 原因： 服务器端没有设置 Access-Control-Allow-Origin 头部。
   • 解决方案： 在服务器端设置 Access-Control-Allow-Origin 头部，指定允许访问的域名。

3. 使用 withCredentials 时出现问题: 浏览器控制台显示 "The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’" 错误。

   • 原因： 当使用 withCredentials: true 时，Access-Control-Allow-Origin 不能设置为 *，必须设置为具体的域名。
   • 解决方案： 将 Access-Control-Allow-Origin 设置为具体的域名。

六、 CORS：一把双刃剑

CORS在解决跨域问题的同时，也带来了一些安全风险。如果服务器端配置不当，可能会导致恶意网站窃取用户数据。

• *`Access-Control-Allow-Origin: ` 的风险**: 允许所有域名访问，意味着任何网站都可以访问你的API，包括恶意网站。恶意网站可以伪装成你的网站，欺骗用户，窃取用户的敏感信息。
• 允许不安全的HTTP方法: 如果你的API只允许 GET 和 POST 方法，不要允许 PUT 和 DELETE 方法，因为这些方法可能会被恶意网站利用，修改或删除你的数据。
• 允许不安全的HTTP头部: 如果你的API不需要某些自定义的头部，不要允许这些头部，因为这些头部可能会被恶意网站利用，发送恶意请求。

因此，在配置CORS时，一定要谨慎，只允许必要的域名、HTTP方法和头部，避免安全风险。

七、 总结：CORS，让Web更开放，更安全

CORS是现代Web开发中不可或缺的一部分。它打破了浏览器同源策略的限制，让Web应用可以安全地访问来自不同域名的资源，构建更加丰富和强大的应用。

虽然CORS的配置比较复杂，但只要理解了它的工作原理，就能轻松解决跨域问题。记住，CORS是一把双刃剑，在解决跨域问题的同时，也要注意安全风险，谨慎配置。

希望这篇文章能帮助你更好地理解CORS，让你在Web开发的道路上更加顺畅！现在，你可以放心地去B国银行取钱啦！ 前提是B国银行已经给你发了CORS通行证。 祝你旅途愉快，数据自由！