在 JavaScript 中,要想跨域请求并获取返回的数据,通常有以下几种方法:
- 使用 JSONP(JSON with padding),这是一种利用 script 标签跨域获取数据的方法,它的原理是利用 script 标签没有跨域限制的特性,将服务器返回的数据放在一个函数调用中作为参数返回给客户端。具体实现步骤如下:
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = url + '?callback=' + callback;
document.body.appendChild(script);
}
jsonp('https://example.com/api/data', 'callbackFunc');
function callbackFunc(data) {
console.log(data);
}
- 使用 CORS(Cross-Origin Resource Sharing),这是一种跨域资源共享的机制,在服务器端设置响应头中的 Access-Control-Allow-Origin 来允许跨域请求。同时在客户端发送请求时,设置 withCredentials 为 true,允许携带 cookie。具体实现步骤如下:
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'https://example.com/api/data', true);
xhr.send();
- 使用代理,将跨域请求发送给同域的服务器,由服务器代为请求目标服务器数据,并将数据返回给客户端。客户端代码如下:
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'http://localhost:3000/api/proxy', true);
xhr.send();
服务器代码如下:
const http = require('http');
const request = require('request');
http.createServer(function(req, res) {
const url = req.url.replace(/^\/api\/proxy\?/, '');
const options = {
url: url,
headers: {
'User-Agent': 'request'
}
};
request(options).pipe(res);
}).listen(3000);