5种处理js跨域问题方法汇总

以下是“5种处理js跨域问题方法汇总”的完整攻略：

1. 什么是跨域问题

跨域问题是指在浏览器端，当脚本试图访问来自不同源（域名、端口、协议）的资源时，会出现安全限制，这就是跨域问题。跨域问题对前端开发影响较大，如果不处理的话，可能会出现一些非常棘手的问题。

2. 为什么会出现跨域问题

跨域问题的产生是因为浏览器出于安全考虑而限制了客户端脚本中发起的跨域HTTP请求。

浏览器出于安全考虑不允许跨域访问，因为如果允许跨域的话，那么就会有人通过脚本发起同其他网站之间的交互，从而导致数据泄露、篡改等安全问题。

3. 五种处理跨域问题的方法

• JSONP
• CORS
• postMessage
• WebSocket
• 代理

3.1 JSONP

JSONP具体的实现方式是，在客户端调用一个跨域的数据时，会在请求的URL中添加一个callback参数，callback的值是一个JavaScript函数名，服务器端根据该参数的值对数据进行包装，例如：

callback({name:'Tom',age:18});

客户端会自动将服务器返回的响应数据解析为JavaScript对象，从而实现跨域数据传输。

但是在使用JSONP的时候，存在一些安全隐患，比如服务器没有足够的安全检查，可能引起XSS漏洞，所以使用JSONP要注意安全性。

3.2 CORS

CORS 的全称是 Cross-Origin Resource Sharing，它是HTML5规范携带的一种用于解决跨域问题的标准。CORS 的思想就是，使用自定义HTTP头，让服务器与客户端一个约定，从而实现跨域数据传输。

如果服务器端支持 CORS，那么在客户端发送请求时，在HTTP头中增加一个Origin字段，该字段标识了请求是从哪个来源发出。如果服务器认为客户端是安全可信的来源，就在响应头中增加Access-Control-Allow-Origin字段，该字段标识了客户端是被允许访问的域名，从而就可以实现数据传输。例如：

请求头：

GET /test HTTP/1.1
Host: www.server.com
Origin: http://www.client.com

响应头：

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://www.client.com

3.3 postMessage

postMessage 是HTML5的一种在跨文档通信时使用的API。它可以跨域传递字符串数据，传递的数据不能过大，大概在5M以内，但是传的数据必须是字符串的形式，并且双方都需要支持这个API。

例如：

在页面A中：

window.postMessage('hello from A', 'http://www.example.com'); 

在页面B中：

window.addEventListener('message', function(event) {
  console.log(event.data);// hello from A 
  console.log(event.origin); // http://www.example.com
}, false);

3.4 WebSocket

WebSocket是HTML5的一种协议，可以实现在一个TCP连接上进行全双工通信，服务器可以主动向客户端推送消息，发送消息不需要HTTP头等内容，数据是UTF-8编码的字符串。

WebSocket可以与http协议共存，如果服务器与客户端都支持WebSocket通信，那么就可以通过WebSocket以full-duplex的方式进行跨域数据传输。

例如：

在页面A中：

var ws = new WebSocket("ws://www.example.com/socketserver");
ws.onopen = function (evt) { 
  ws.send("hello, server!");
};

在页面B中：

websocket = new WebSocket("ws://www.example.com/socketserver");
websocket.onmessage = function (evt) { 
  console.log(evt.data); // hello, server!
};

3.5 代理

代理的方式是将域名和接口统一在同一个域名下，通过代理服务器进行数据转发。这种方式通常用于企业内部的架构中，例如client.company.com和server.company.com可以通过代理server.proxy.com来进行访问。

例如：

在页面A中通过ajax请求：

$.ajax({
  url: '/proxy/mydata.com/api/getdata',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error:function(err){
    console.log(err);
  }
});

在代理服务器上，将请求转发到真实接口上：

app.get('/proxy/mydata.com/api/getdata', function(req, res) {
  request({
    url: 'http://mydata.com/api/getdata',
    method: 'GET',
    json: true,
    headers: {
      'content-type': 'application/json'
    }
  }, function(error, response, body) {
    if (!error && response.statusCode == 200) {
      res.json(body)
    }
  });
});

4. 总结

以上就是五种处理跨域问题的方法，不同的方法适用于不同的场景，需要根据实际情况进行选择，其中CORS和WebSocket是比较推荐的方法，这两种方法不会破坏浏览器同源策略，较为安全。