关于JavaScript跨域问题及实时刷新解决方案

什么是跨域

跨域是指在一个域名下使用了另一个域名的资源。如从www.domain1.com的域名下的页面中向www.domain2.com发起ajax请求，就是跨域操作。

常见的跨域场景

• 域名不同
• 协议不同
• 端口不同

JavaScript跨域问题的原因

从浏览器的安全限制出发，浏览器禁止页面使用其它域名下的资源，为了解决这种跨域问题，需要进行一系列的设置和限制。

解决方案

1. JSONP(仅适用于GET请求)

JSONP(JavaScript Object Notation with Padding) 是一种非官方的跨域解决方案。其核心原理是动态创建一个<script>标签，通过src属性引用一个跨域的URL，同时传递一个回调函数的参数到该URL中，该URL返回的是一个以该参数作为参数名的JSON对象。利用<script>标签没有跨域限制的特点，达到通过跨域获得数据的目的。

示例1：

function showResult(result) {
    console.log(result);
}

const script = document.createElement('script');
script.src = 'http://www.domain2.com/jsonp?callback=showResult'; // 该URL返回的是以showResult函数名为回调的JSON对象
document.head.appendChild(script);

示例2：

$.ajax({
    url: 'http://www.domain2.com/jsonp',
    type: 'get',
    dataType: 'jsonp', // 注意：dataType必须设置成jsonp
    jsonp: 'callback', // 服务端通过这个参数名获取回调函数名
    success: function (result) {
        console.log(result);
    }
});

2. CORS(推荐使用)

CORS(Cross-Origin Resource Sharing) 是一种新兴的跨域解决方案，其核心思想是使用自定义HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是成功还是失败。CORS兼容性好，支持所有类型的HTTP请求，而且不需要在客户端做任何特殊处理。

CORS既要在客户端设置，也要在服务端设置，具体操作如下：

1. 客户端设置

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.domain2.com:8080/server-data', true);
xhr.withCredentials = true; // 携带跨域cookie
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

1. 服务端设置

服务端需要设置Access-Control-Allow-Origin和Access-Control-Allow-Credentials两个头部信息，前者表示允许的访问域名，后者表示允许携带cookie。

Access-Control-Allow-Origin: http://www.domain1.com // 允许的访问域名
Access-Control-Allow-Credentials: true // 允许携带cookie

3. iframe

使用iframe进行跨域操作，实际上是利用了跨域框架之间通信的机制。但是需要注意的是，使用iframe跨域请求时，需要设置iframe的document.domain属性为与父窗口相同的域名，这样才可以进行跨域通信。

<iframe src="http://www.domain2.com/index.html" onload="iframeLoaded()"></iframe>

function iframeLoaded() {
    const iframe = document.getElementsByTagName('iframe')[0];
    const iframeWindow = iframe.contentWindow;
    const iframeDocument = iframeWindow.document;
    console.log(iframeDocument.body.innerHTML);
}

4. postMessage

使用postMessage API进行跨域通信，可以安全、可靠、简单地实现不同窗口或iframe之间的数据传输。该API介绍详见MDN。

// 父窗口
window.addEventListener('message', function (event) {
    if (event.origin === 'http://www.domain2.com') {
        console.log('收到数据：' + event.data);
    }
});

const iframe = document.getElementsByTagName('iframe')[0];
iframe.contentWindow.postMessage('Hello, World!', 'http://www.domain2.com');

// iframe
window.addEventListener('message', function (event) {
    if (event.origin === 'http://www.domain1.com') {
        console.log('收到数据：' + event.data);
    }
});

const parentWindow = window.parent;
parentWindow.postMessage('Hello, World!', 'http://www.domain1.com');

实时刷新解决方案

实时刷新指的是当代码修改之后，自动重新加载页面。可以通过以下的方案来实现：

1. 使用浏览器插件：如Chrome的LiveReload插件
2. 使用Websocket实现服务器主动推送：需要在服务端和客户端实现WebSocket通信，具体可参考相关文档
3. 利用文件系统的API：通过监听文件系统的变化，自动更新页面。该方案需要在服务端中实现，可以使用node.js提供的fs.watch或chokidar等工具。

总结

JavaScript跨域问题是前端开发中常见的问题，可以通过JSONP、CORS、iframe、postMessage等方法进行解决。而实时刷新又是开发中常用的关键功能，可以通过浏览器插件、Websocket、文件系统API等方法实现，开发者可以根据具体需求选择最适合自己的方案。