js实现跨域的方法实例详解

JS实现跨域的方法实例详解

跨域问题指的是由于浏览器的同源策略（Same-Origin Policy）限制，使得在浏览器中请求数据时只能获取与当前页面属于同一个域名、端口和协议的数据，而不能获取其他域名、端口或协议的数据。该问题可以通过以下多种方式来解决。

1. JSONP（JSON with Padding）

JSONP是一种跨域通信的方案之一，利用script标签可以跨域加载资源的特点来获取数据。具体使用方法如下：

function jsonp(url, callback, success) {
  var script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.head.appendChild(script);
  window[callback] = function(data) {
    success(data);
    document.head.removeChild(script);
  };
}

其中，url表示要请求的数据源，callback表示回调函数的名称，success表示请求成功后的回调函数。该函数的原理是将callback作为url参数传递给服务器，在服务器端将返回的数据塞进一个函数调用，并将调用结果返回给前端，以实现无需ajax跨域获取数据。

2. CORS（Cross-Origin Resource Sharing）

CORS是浏览器的一种跨域解决方案，是一个W3C标准，全称“跨域资源共享”。它通过在相应的HTTP头部信息中设置几个属性，允许浏览器进行跨域访问。常用的头部信息如下：

Access-Control-Allow-Origin：允许跨域访问的源，可以设置为*或具体值；
Access-Control-Allow-Headers：允许前端发起请求的头部信息；
Access-Control-Allow-Methods：允许前端使用的请求方法，如POST、GET等；
Access-Control-Max-Age：浏览器缓存预检请求的时间（秒）；
Access-Control-Expose-Headers：允许前端获取到的头部信息。

因为CORS需要服务器端的支持和设置，前端常常无法在不同的网站之间使用CORS。下面是一个使用CORS实现跨域请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.withCredentials = true; // 跨域请求携带cookie
xhr.send();

需要注意的是，使用CORS实现跨域请求需要同时满足两个条件：服务器端设置了CORS，前端代码使用XMLHTTPRequest。同时，如果服务器端要求跨域请求必须携带cookie时，前端代码需要设置xhr的withCredentials属性为true。

以上两种是常见的跨域请求解决方案，根据实际情况可以选择不同的方案。在使用时需要关注安全性和兼容性问题。