在前端开发中，我们经常需要从不同的域名或端口上获取数据，这就涉及到了跨域请求。但是由于浏览器的同源策略限制，直接跨域请求会受到阻碍。本文将介绍如何通过几种方法来解决跨域请求的问题。
JSONP（JSON with Padding）
JSONP 是一种解决跨域请求的方法，它利用了 script 标签可以跨域请求的特性。JSONP 给服务器发送一个回调函数的名称作为参数，服务器返回该名称的函数调用，并将数据作为参数传递给该函数。
function handleResponse(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'https://example.com/api?callback=handleResponse';
document.body.appendChild(script);服务器返回的数据将会被包裹在 handleResponse 函数里执行，从而实现跨域请求。
CORS（Cross-Origin Resource Sharing）
CORS 是一种更加安全和灵活的跨域请求方法，它通过在 HTTP 头中添加一些字段来让服务器知道是否允许当前域名的请求。如果服务器允许跨域请求，它会返回 Access-Control-Allow-Origin 字段，其中包含了允许跨域访问的域名。客户端才能成功获取到数据。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api');
xhr.withCredentials = true;
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();在实际应用中，我们需要在服务器端设置相应的 CORS 配置，例如：
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});使用代理
如果以上两种方法都不能解决跨域请求问题，我们可以考虑使用代理。通过在同一域名下搭建一个代理服务器来发送请求，然后再由代理服务器转发请求到目标服务器获取数据。
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api');
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();代理服务器代码示例：
app.get('/api', function(req, res) {
const url = 'https://example.com/api';
request(url).pipe(res);
});总结
本文介绍了三种常见的跨域请求的方法：JSONP、CORS 和使用代理。开发者需要根据具体业务场景和需求选择合适的方法。同时，在使用这些方法时还需要注意安全性和性能问题，避免出现安全漏洞和性能瓶颈。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30233