Ajax解决跨域之设置CORS响应头实现跨域案例详解
1.设置CORS响应头实现跨域 跨源资源共享（CORS） CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源 CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。 ajaxDemo.html <!DOCTYPE ht
### JavaScript源代码：Ajax解决跨域之设置CORS响应头实现跨域案例详解
#### 跨源资源共享（CORS）概述
跨源资源共享（Cross-Origin Resource Sharing，简称CORS）是一种安全机制，允许Web应用程序从不同的域名加载资源。在默认情况下，同源策略限制了从其他域名获取资源的能力，这是为了防止恶意网站发起跨站请求伪造攻击（CSRF）。然而，在某些情况下，合法的网站可能需要从其他域名获取资源。这时就需要使用到CORS机制。
#### CORS的工作原理
CORS的工作原理主要依赖于HTTP头部信息。当客户端（通常是浏览器）发出一个跨域请求时，它会在请求头部加入`Origin`字段，这个字段指出了请求的来源。服务器接收到这个请求后，如果同意这个跨域请求，则会在响应头部添加`Access-Control-Allow-Origin`字段，并将其值设置为请求中的`Origin`字段值或“*”表示接受任意域名的请求。
#### 设置CORS响应头实现跨域案例详解
下面我们将通过一个具体的例子来演示如何使用CORS解决跨域问题。
##### HTML页面代码
HTML页面`ajaxDemo.html`代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>发送请求</button>
<div id="result"></div>
<script>
const btn = document.querySelector('button');
btn.onclick = function() {
// 1. 创建 XMLHttpRequest 对象
const x = new XMLHttpRequest();
// 2. 初始化设置
x.open("GET", "http://127.0.0.1:8080/cors-server");
// 3. 发送请求
x.send();
// 4. 绑定 onreadystatechange 事件
x.onreadystatechange = function() {
if (x.readyState === 4) {
if (x.status >= 200 && x.status < 300) {
document.getElementById('result').innerText = x.responseText;
}
}
};
};
</script>
</body>
</html>
```
这段代码定义了一个简单的HTML页面，包含一个按钮和一个用于显示结果的`div`元素。当用户点击按钮时，会触发一个AJAX请求，向服务器发送GET请求并处理响应数据。
##### 服务器端代码
服务器端使用Node.js的Express框架实现，代码如下：
```javascript
// server.js
// 1. 引入 express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
app.all('/cors-server', (request, response) => {
// 设置响应头
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有跨域请求
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 允许指定请求跨域
// response.setHeader("Access-Control-Allow-Headers", '*'); // 允许自定义请求头标签
// response.setHeader("Access-Control-Allow-Methods", '*'); // 允许所有方法
// response.setHeader("Access-Control-Allow-Methods", 'GET'); // 允许GET方法
response.send('hello CORS');
});
// 4. 监听端口启动服务
app.listen(8080, () => {
console.log("服务已经启动, 8080端口监听中.");
});
```
这段代码创建了一个Express服务器，定义了一个处理所有HTTP请求的方法，并设置了CORS响应头。具体来说，`Access-Control-Allow-Origin`被设置为“*”，这意味着允许来自任何域名的请求。
##### 启动服务
在命令行中使用以下命令启动服务：
```sh
nodemon server.js
```
#### 运行结果
当用户点击HTML页面上的按钮时，会向服务器发送一个GET请求。如果一切正常，服务器将响应一个包含“hello CORS”的文本，并且该文本将显示在HTML页面的`div`元素中。
#### 总结
通过设置CORS响应头，我们可以轻松地解决跨域问题。这种方式不需要客户端做任何额外的工作，所有逻辑都在服务器端完成，非常方便。此外，通过合理配置CORS响应头，还可以进一步增强安全性，例如限制允许的请求来源、请求类型等。
