网络技术问题 | JavaScript 课程测验 1 |问题 13

问题描述

在使用 XMLHttpRequest 发送跨域请求时，为什么会出现 CORS 问题？如何解决这个问题？

解答

跨域请求原理

当我们的 JavaScript 代码通过 XMLHttpRequest 发送请求到不同的域名或端口时，浏览器会限制这个请求的访问，并且这时候就会发生跨域请求。

为什么会出现该限制呢？这是出于对 Web 安全的考虑，如果浏览器不做出任何限制，那么跨域请求就有可能引发以下一系列问题:

• 黑客可以绕过浏览器的同源策略，通过跨域请求来诱导用户输入敏感信息。
• 网站可能会面临 CSRF（跨站请求伪造）等攻击。

CORS（跨域资源共享）解决方案

CORS 模式是一种用于解决跨域请求问题的方案，其实现了服务端与客户端资源共享。当使用 CORS 方式进行跨域请求时，需要进行以下配置：

1. 服务端需在响应头中添加 Access-Control-Allow-Origin 字段

   这个字段的作用是告诉浏览器，哪些源（域名）可以访问该资源。

   假设客户端代码在 http://localhost:8080/ 上执行，我们需要访问的接口为 http://api.example.com/getData，那么服务端应该在响应头中添加以下字段：

   Access-Control-Allow-Origin: http://localhost:8080
   

2. 对于非简单请求还需要进行其他预检操作

   这里所说的简单请求，包括以下几种方法：

   • HEAD
   • GET
   • POST

   并且请求头中不得使用以下字段：

   • Accept
   • Accept-Language
   • Content-Language
   • Content-Type（只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain）

   如果你的请求方式不是上面三种简单请求，或者请求头中使用了上述字段之外的字段，则需要进行一次 "预检" 操作。

   预检操作是浏览器在正式使用 CORS 发送跨域请求前，发起的一种自动的 OPTION 请求，用于向服务器请求必要的 CORS 配置信息，并验证服务端是否支持 CORS。

   这时候，服务端需要做出如下响应：

   Access-Control-Allow-Origin: http://localhost:8080
   Access-Control-Allow-Methods: GET, POST, PUT
   Access-Control-Allow-Headers: Content-type
   Access-Control-Max-Age: 1000
   

   上面四个字段分别表示：

   • Access-Control-Allow-Methods: 用于指定服务端支持的请求方法。
   • Access-Control-Allow-Headers: 用于指定服务端允许的请求头字段。
   • Access-Control-Max-Age: 指定 CORS 预检请求的有效期。
   • Access-Control-Allow-Credentials: 可选字段，表示支持服务端发送 Cookie 等用户凭证。

参考资料

• HTTP 权威指南
• MDN Web Docs - CORS