Javascript跨域请求的4种解决方式

以下是关于JavaScript跨域请求的4种解决方式的完整攻略：

1. JSONP

JSONP（JSON with Padding）是一种跨域数据请求的方式。它的实现原理是利用<script>标签不受同源限制的特性，通过动态创建<script>标签来实现跨域请求。

JSONP的具体实现流程如下：

1. 在页面上添加一个<script>标签，标签的src属性指向接口的URL，同时为了能够接收返回的数据，需要在URL中添加一个回调函数名称的参数，比如callback=handleResponse。
2. 在页面中定义这个回调函数handleResponse，当接口返回数据时，会调用这个回调函数，并将数据作为参数传递给它。
3. 服务器接到请求后，会根据URL中的回调函数名称参数，将数据包裹在一段JavaScript代码中返回给前端，该代码会自动调用前端设置的回调函数，并将数据传递给它。

示例代码如下：

function handleResponse(data) {
    console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/api?param1=value1&callback=handleResponse';
document.body.appendChild(script);

需要注意的是，JSONP请求只支持GET方法，因为它是通过URL传递参数的。

2. CORS

CORS（Cross-Origin Resource Sharing）是一种浏览器跨域请求资源的技术。它允许在浏览器端使用XMLHttpRequest请求不同源的服务器，从而克服了同源政策的限制。

要使用CORS实现跨域请求，需要在服务器端设置允许跨域访问的HTTP响应头。具体做法是在响应头中添加Access-Control-Allow-Origin字段，该字段的值为允许跨域访问的源。如果希望所有域名都可以跨域访问，可以将该字段的值设置为"*"。

示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.withCredentials = true; //允许发送cookie
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;
        console.log(response);
    }
};
xhr.send();

需要注意的是，CORS需要服务器端的支持，如果服务器不设置允许跨域访问的头信息，浏览器会阻止跨域请求。

3. WebSocket

WebSocket是一种基于TCP协议的新型双向通信协议，支持浏览器和服务器之间的实时数据推送。它使用WebSocket协议进行通信，与HTTP协议一样，都是基于TCP的应用层协议。

WebSocket可以通过JavaScript在浏览器端发送和接收消息，而且不受同源政策的限制。

示例代码如下：

var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function() {
    console.log('WebSocket connected');
    socket.send('Hello Server!');
};
socket.onmessage = function(event) {
    console.log('Message from server: ' + event.data);
};

需要注意的是，WebSocket连接需要服务器端的支持，如果服务器不支持WebSocket协议，浏览器将无法建立连接。

4. 代理服务器

代理服务器是一种将客户端请求代理转发给目标服务器的中间服务器。当客户端想要向目标服务器发送跨域请求时，可以先向代理服务器发送请求，再由代理服务器将请求转发给目标服务器，从而避免了跨域问题。

示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;
        console.log(response);
    }
};
xhr.send();

在上述示例代码中，客户端向当前域下的/api路径发送请求，而不是直接向目标服务器发送请求。服务器端通过设置反向代理，将/api路径的请求转发到目标服务器，这样客户端就可以绕过同源政策进行跨域请求了。

需要注意的是，代理服务器需要额外的配置和维护成本，而且会增加请求的延迟，因此只适合于一些小规模的跨域请求。对于大规模的跨域请求，建议使用其他的解决方案，比如CORS。