跨域不神秘：让你全面理解 CORS 的小知识点

了解跨域的基础知识

当您在浏览器中输入一个网址时，浏览器会发送一个HTTP请求到相应的服务器，服务器收到请求后会返回一个HTTP响应。在这个过程中，浏览器会检查请求的源（origin）和响应的源是否相同。如果两个源相同，则允许该请求；如果两个源不同，则浏览器将阻止该请求。这种限制称为同源策略（same-origin policy）。

同源策略是为了防止恶意网站窃取您在其他网站上输入的敏感信息，例如密码或信用卡号。例如，如果一个恶意网站能够访问您的银行网站，它就可以窃取您输入的银行账号和密码。

CORS 是如何工作的

CORS 是一种机制，它允许浏览器在跨域的情况下发送和接收请求。CORS 协议允许服务器指定哪些源可以访问其资源，以及允许这些源执行哪些操作。

当浏览器发送跨域请求时，它会向服务器发送一个预检请求（preflight request）。预检请求是一个 OPTIONS 请求，它用于询问服务器是否允许浏览器发送实际的请求。服务器在收到预检请求后，会返回一个预检响应（preflight response）。预检响应中包含了服务器允许浏览器发送的请求方法、头字段和资源类型。

浏览器在收到预检响应后，就可以发送实际的请求了。实际请求是一个 GET、POST、PUT、DELETE 或其他类型的请求。服务器在收到实际请求后，会返回一个实际响应（actual response）。

使用 CORS 解决跨域问题

要使用 CORS 解决跨域问题，您需要在服务器端进行配置。您需要在服务器端的响应头中添加以下字段：

• Access-Control-Allow-Origin：指定允许哪些源访问服务器的资源。
• Access-Control-Allow-Methods：指定允许哪些请求方法访问服务器的资源。
• Access-Control-Allow-Headers：指定允许哪些头字段随请求发送到服务器。
• Access-Control-Allow-Credentials：指定是否允许浏览器在请求中包含凭据（例如 cookie 或身份验证信息）。

例如，如果您希望允许来自 example.com 的源以 GET、POST 和 PUT 方法访问服务器的资源，您可以在服务器端的响应头中添加以下字段：

Access-Control-Allow-Origin: example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept

结束语

CORS 是一种强大的机制，它可以帮助您解决跨域问题。通过使用 CORS，您可以让浏览器在跨域的情况下发送和接收请求，从而实现跨域数据交互。