软件测试/测试开发/全日制 |理解CORS与跨域资源共享的应用**跨域资源共享（CORS）**是一种机制，它使用额外的

霍格沃兹测试开发学社推出了《Python全栈开发与自动化测试班》。本课程面向开发人员、测试人员与运维人员，课程内容涵盖Python编程语言、人工智能应用、数据分析、自动化办公、平台开发、UI自动化测试、接口测试、性能测试等方向。为大家提供更全面、更深入、更系统化的学习体验，课程还增加了名企私教服务内容，不仅有名企经理为你1v1辅导，还有行业专家进行技术指导，针对性地解决学习、工作中遇到的难题。让找工作不再是难题，并且能助力你拿到更好的绩效与快速晋升。

**跨域资源共享（CORS）**是一种机制，它使用额外的 HTTP 头来告诉浏览器允许一个 Web 页面从另一个域（网站）发起请求。CORS 被设计为浏览器和服务器之间进行沟通的一种方式，以确保安全性和防止跨站请求伪造（CSRF）等攻击。

CORS 的工作原理：

发起请求： 当浏览器发起一个跨域请求时，例如从 http://domain-a.com 向 http://domain-b.com 发起请求，浏览器会在请求头中添加一个 Origin 字段，标识请求发起的源。
服务器响应： 服务器会检查请求头中的 Origin 字段，并判断是否允许该源访问资源。如果允许，服务器会在响应头中添加一个 Access-Control-Allow-Origin 字段，表示允许的源。
浏览器处理： 如果服务器的响应中包含了合适的 Access-Control-Allow-Origin 头，浏览器会允许页面访问响应中的数据，否则会抛出跨域错误。

CORS 的常见头信息：

Origin： 指示请求的来源，由浏览器自动添加。
Access-Control-Allow-Origin： 指定哪些域是被允许访问资源的。可以是具体的域名，也可以是 * 表示允许所有域。
Access-Control-Allow-Methods： 指定被允许的 HTTP 方法。
Access-Control-Allow-Headers： 指定浏览器允许访问的响应头。
Access-Control-Allow-Credentials： 表示是否允许发送 Cookie。如果设置为 true，则允许发送 Cookie。
Access-Control-Expose-Headers： 指定哪些响应头可以暴露给前端 JavaScript 代码。

使用 CORS 的应用：

1. 前端 AJAX 请求：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.withCredentials = true; // 允许发送 Cookie
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

2. 后端配置：

在后端服务器的响应中添加 CORS 头：

// Node.js Express 示例
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://domain-a.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

app.get('/data', (req, res) => {
  res.send('Hello from http://api.example.com!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

注意事项：

安全性考虑： 使用 Access-Control-Allow-Origin: * 可能会造成安全风险，最好指定允许的具体域。
复杂请求： 对于某些类型的请求（例如带有特殊请求头或使用非简单 HTTP 方法的请求），浏览器会先发送一个预检请求（Preflight Request）。
带凭证的请求： 如果请求需要带有凭证（Cookie、HTTP认证等），服务器需要在响应中设置 Access-Control-Allow-Credentials: true。

CORS 是一种为浏览器和服务器之间实现安全跨域通信的机制，了解和正确使用 CORS 对于构建现代 Web 应用是至关重要的。