CORS响应头详解：Ajax实现跨域实战教程

本文档详细介绍了如何使用JavaScript的Ajax技术解决跨域问题，特别是通过设置CORS（跨域资源共享）响应头实现的案例。CORS是HTML5提供的一种官方解决方案，它允许服务器控制哪些源可以访问其资源，从而避免了同源策略带来的限制。 首先，了解什么是CORS。跨域资源共享（CORS）是一种机制，它允许服务器声明哪些源（通常指不同的域名或端口）可以通过浏览器的AJAX请求访问其资源。它主要通过在服务器端设置特定的HTTP响应头部信息（如Access-Control-Allow-Origin、Access-Control-Allow-Methods等）来实现。 在给出的示例中，有一个名为`ajaxDemo.html`的页面，它使用XMLHttpRequest发起一个GET请求到本地服务器（`http://127.0.0.1:8080/cors-server`）。在客户端代码中，首先创建一个新的XMLHttpRequest对象，然后设置请求方法（open()函数），指定目标URL。接着，调用send()方法发送请求，当服务器返回响应时，通过onreadystatechange事件处理程序检查状态码（readyState）和状态（status），如果请求成功（状态码在200-299范围内），则将响应内容显示在页面上。 同时，文档还展示了服务器端的实现，使用Node.js框架Express。在这个例子中，通过`express`模块创建一个简单的服务器，接收并处理来自客户端的请求。服务器端需要设置CORS响应头，例如`Access-Control-Allow-Origin`，允许特定的源（如*表示任何源，或具体的源域名）访问资源。 设置CORS响应头的代码片段如下： ```javascript // 在server.js中 const app = express(); // 允许特定源访问 app.use(function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080'); // 示例中的源，根据实际需求替换 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // ...其他可能需要的CORS头 next(); }); // 处理实际的请求 app.get('/cors-server', function(req, res) { res.send('Hello, CORS!'); }); // 启动服务器 app.listen(8080, function () { console.log('CORS服务器正在监听8080端口'); }); ``` 本文档通过实例展示了如何在客户端和服务器端配合使用CORS来实现跨域请求，让开发者理解如何在服务器端设置响应头以确保AJAX请求的安全跨域访问。这对于开发Web应用时处理前后端交互、数据共享非常重要。