浅出：JSON跨域请求的实现与解决方案**
在现代Web开发中，前后端分离架构已成为主流趋势，前端页面（通常运行在一个域名下，如 http://www.example.com）需要频繁地从后端API（可能运行在另一个域名下，如 http://api.example.com）获取数据，这些数据格式通常是JSON，出于浏览器的同源策略（Same-Origin Policy）限制，这种跨域的JSON请求会默认被阻止，以防止恶意网站读取用户在另一个网站上的敏感数据，JSON跨域请求究竟该如何实现呢？本文将详细介绍其原理及常用解决方案。
什么是同源策略与跨域？
同源策略是浏览器最核心也最基本的安全功能之一，如果两个页面的协议、域名（或IP）和端口都相同，则它们属于同一个源,否则就是不同源。
示例：
http://www.example.com/index.html(源A)http://api.example.com/data.json(源B，域名不同,跨域)https://www.example.com/index.html(源C，协议不同,跨域)http://www.example.com:8080/index.html(源D，端口不同,跨域)
当源A的页面试图请求源B的JSON数据时，浏览器会拦截这个请求，并抛出一个类似 “No 'Access-Control-Allow-Origin' header is present on the requested resource.” 的错误。
JSON跨域请求的核心解决方案：CORS（跨域资源共享）
CORS（Cross-Origin Resource Sharing）是W3C标准，它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而实现跨域数据交换，CORS通过在HTTP响应头中添加特定的字段,来告诉浏览器哪些外部源被允许访问该资源。
对于JSON数据请求，最常用的CORS实现方式是JSONP和现代CORS（服务端设置响应头）。
JSONP (JSON with Padding) - 旧方案，仅适用于GET请求
JSONP是一种非官方的跨域解决方案，它利用了<script>标签的src属性不受同源策略限制的特性。
工作原理：
- 前端页面定义一个回调函数，
handleResponse(data)。 - 动态创建一个
<script>标签，将其src指向后端API的URL，并在URL中传递回调函数的名字，如：http://api.example.com/data?callback=handleResponse。 - 后端收到请求后，不再返回纯粹的JSON数据，而是将JSON数据包裹在回调函数名中返回，
handleResponse({"name": "John", "age": 30})。 - 浏览器接收到这个响应后，会将其作为JavaScript代码执行，从而调用前端定义的
handleResponse函数,并将解析后的JSON数据作为参数传入。
前端JSONP实现示例 (原生JS):
<!DOCTYPE html>
<html>
<head>JSONP Example</title>
</head>
<body>
<div id="result"></div>
<script>
function handleResponse(data) {
document.getElementById('result').innerHTML = 'Name: ' + data.name + ', Age: ' + data.age;
console.log('Data received via JSONP:', data);
}
// 动态创建script标签
function jsonpRequest(url, callbackName) {
const script = document.createElement('script');
script.src = url + '?callback=' + callbackName;
document.body.appendChild(script);
}
// 发起请求
jsonpRequest('http://api.example.com/data', 'handleResponse');
</script>
</body>
</html>
后端JSONP实现示例 (Node.js Express):
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
const callbackName = req.query.callback;
const data = { name: 'John', age: 30 };
if (callbackName) {
// 返回JSONP格式的响应
res.send(`${callbackName}(${JSON.stringify(data)})`);
} else {
// 普通JSON响应
res.json(data);
}
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
JSONP的缺点：
- 仅支持GET请求：无法用于POST、PUT等其他HTTP方法。
- 安全性问题：如果后端被恶意利用，可能会返回恶意JavaScript代码，存在XSS风险,只应信任可用的JSONP服务。
- 错误处理困难：无法通过HTTP状态码来判断请求是否成功,只能通过回调函数执行是否成功来间接判断。
现代CORS - 推荐方案
现代浏览器支持CORS标准，它更安全、更强大，支持所有HTTP方法，实现CORS的关键在于服务器端的响应头设置。
核心响应头：
Access-Control-Allow-Origin：指定哪些域名可以访问该资源。- 可以设置为具体域名，如
Access-Control-Allow-Origin: http://www.example.com。 - 也可以设置为 ，表示允许任何域名访问（在生产环境中通常不推荐，除非是公开API）。
- 可以设置为具体域名，如
Access-Control-Allow-Methods：指定允许的HTTP方法，如GET, POST, PUT, DELETE, OPTIONS。Access-Control-Allow-Headers：指定允许的请求头，如Content-Type, Authorization。Access-Control-Allow-Credentials：是否允许发送Cookie等凭证信息，设置为true或false。Access-Control-Max-Age：预检请求的结果可以被缓存多长时间（秒）。
CORS请求的分类：
-
简单请求（Simple Request）：
- 方法：GET, POST, HEAD
- Content-Type：只能是
text/plain,multipart/form-data,application/x-www-form-urlencoded - 请求头：不能是自定义的（如
X-Custom-Header） - 对于简单请求，浏览器会直接发送请求，并在请求头中添加
Origin字段，服务器通过响应头Access-Control-Allow-Origin来决定是否允许。
-
非简单请求（Non-Simple Request） / 预检请求（Preflight Request）：
- 当请求方法不是GET/POST/HEAD，或者Content-Type是
application/json等，或者使用了自定义请求头时，浏览器会先发送一个OPTIONS方法的预检请求到服务器。 - 预检请求会询问服务器：源A的域名，使用XX方法，携带XX请求头,是否可以访问资源？
- 服务器需要响应
OPTIONS请求，并返回相应的CORS响应头（如Access-Control-Allow-Methods,Access-Control-Allow-Headers等）。 - 如果服务器允许,浏览器才会发送实际的跨域请求。
- 当请求方法不是GET/POST/HEAD，或者Content-Type是
后端CORS实现示例 (Node.js Express):
const express = require('express');
const cors = require('cors'); // 使用cors中间件更方便
const app = express();
// 方式一：使用cors中间件（推荐）
// app.use(cors()); // 允许所有来源的跨域请求
// 方式二：手动设置CORS响应头（更精细控制）
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://www.example.com'); // 允许的源
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的方法
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); // 允许的请求头
res.header('Access-Control-Allow-Credentials', 'true'); // 允许凭证
// 处理预检请求
if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
app.get('/api/data', (req, res) => {
res.json({ message: 'This is CORS-enabled data!' });
});
app.post('/api/data', (req, res) => {
res.json({ message: 'POST request received and CORS-enabled!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000 with CORS enabled');
});
使用 cors 中间件（如Express的cors包）可以极大简化CORS的配置。
前端如何发起跨域JSON请求（以现代CORS为例）
一旦后端正确配置了CORS响应头，前端就可以像发起同源请求一样使用 fetch 或 XMLHttpRequest 来发起跨域JSON请求,浏览器会自动处理CORS流程。
前端Fetch示例：
// 假设后端CORS已配置，允许 http://www.example.com 访问
fetch('http://api.example.com/api/data')
.
还没有评论，来说两句吧...