1. 使用 JSONP：
JSONP（JSON with Padding）是一种通过动态创建 <script> 标签来绕过跨域限制的方法。服务器返回的数据需要用一个函数包裹，这个函数名称由客户端指定。
function handleJSONP(data) {
console.log(data);
// 在这里处理获取到的 JSON 数据
}
var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleJSONP';
document.body.appendChild(script);
在上述例子中，服务器返回的数据将被动态创建的 script 标签执行，并通过指定的回调函数 handleJSONP 处理。
2. 启用 CORS（跨域资源共享）：
如果服务器启用了 CORS，可以直接使用 XMLHttpRequest 或 Fetch API 进行跨域请求。
fetch('https://example.com/api/data', {
method: 'GET',
mode: 'cors', // 启用 CORS
})
.then(response => response.json())
.then(data => {
console.log(data);
// 在这里处理获取到的 JSON 数据
})
.catch(error => console.error('Error:', error));
确保服务器正确配置了 CORS 头部，允许你的域进行跨域请求。
3. 使用代理服务器：
可以设置一个代理服务器，将跨域请求发送到代理服务器上，然后由代理服务器向目标服务器发起请求。这样，由于浏览器同源策略不适用于服务器之间的请求，就避免了跨域问题。
这是一个基本的代理服务器的例子，使用 Node.js 和 Express：
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');
const app = express();
const PORT = 3000;
app.use(cors());
app.get('/api/data', async (req, res) => {
const response = await fetch('https://example.com/api/data');
const data = await response.json();
res.json(data);
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在这个例子中，代理服务器监听在本地端口 3000 上，通过 /api/data 路由将请求转发到目标服务器。
选择哪种方法取决于你的具体需求和服务器配置。如果目标服务器支持 CORS，直接使用 Fetch API 或 XMLHttpRequest 是最常见的方法。如果不支持 CORS，可以考虑使用 JSONP 或代理服务器。
转载请注明出处：http://www.zyzy.cn/article/detail/4568/JSON