如何在Javascript中实现跨域访问？有哪些方式？

在 JavaScript 中,实现跨域访问主要有以下几种方式:

1. JSONP:利用 <script> 标签的 src 属性指向跨域的 API,并在响应中执行函数调用来绕过跨域限制。

html
<script src="http://example.com/api?callback=func"></script>

<script>
function func(data) {
  // ...
} 
</script> 

2. CORS:在服务器端设置 Access-Control-Allow-Origin,指定允许的源,使浏览器允许跨域请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api');
xhr.send();

3. Web proxy:使用代理服务器代理跨域请求。

var proxy = 'http://example.com/cors';
var proxyURL = proxy + '?url=' + url; 

var xhr = new XMLHttpRequest();
xhr.open('GET', proxyURL);
xhr.send();

4. WebSocket:WebSocket 是一种网络协议,它提供了在单个 TCP 连接上进行全双工通信的机制。

var ws = new WebSocket('ws://example.com/api');

ws.onopen = function() {
  ws.send('Message');  
}

ws.onmessage = function(e) {
  // ...  
} 

5. PostMessage:通过 window.postMessage 方法实现跨窗口通信

// 当前窗口
window.addEventListener("message", function(e) {
  // ...  
}, false);

// 其他窗口
var win = window.open("http://example.com/");
win.postMessage("Message", "http://example.com/"); 

所以,总结来说 JavaScript 中实现跨域访问的主要方式有:

1. JSONP:通过 <script> 标签请求跨域 API
2. CORS:在服务器实现 CORS 跨域资源共享
3. Web proxy:使用代理服务器作为中转
4. WebSocket:利用 WebSocket 协议实现跨域通信
5. PostMessage:通过 HTML5 提供的 window.postMessage 方法跨域通信

在实践中,我们应当优先选择 CORS 这种标准化方案,其次是 WebSocket 与 PostMessage。JSONP 用于古老浏览器对 CORS 不支持的情况。