【计算机基础知识6】跨域问题及解决方案

目录

前言

一、什么是跨域问题？

二、为什么会出现跨域问题？

三、常见的跨域解决方法

1. JSONP（JSON with Padding）

2. CORS（跨域资源共享）

3. 代理服务器

4. postMessage()

---

前言

跨域是前端开发中经常遇到的一个重要问题。本文将详细介绍什么是跨域问题，为什么会出现跨域问题以及如何解决跨域问题。同时，还将通过代码举例来说明相关概念和解决方法。

一、什么是跨域问题？

跨域问题指的是在浏览器端发送 AJAX 请求时，请求的目标资源位于当前页面所在的域之外的情况。浏览器出于安全考虑，实施了同源策略（Same Origin Policy），即默认情况下不允许跨域请求。

同源策略要求 AJAX 请求的协议、端口和域名必须完全一致，否则就会被当作跨域请求。例如，假设当前页面的 URL 是 http://www.example.com，那么向 http://api.example.com 发送 AJAX 请求就会触发跨域问题。

二、为什么会出现跨域问题？

跨域问题的出现是为了保护用户数据和提高安全性。如果没有同源策略，恶意网站就可以在用户无感知的情况下获取到其他网站的数据，从而造成安全风险。

同源策略限制了跨域请求，但也带来了一些不便。比如，当我们需要从不同的域名获取数据或与其他域名进行通信时，就会面临跨域问题。

三、常见的跨域解决方法

1. JSONP（JSON with Padding）

JSONP 是一种跨域解决方案，它利用 <script> 标签的跨域特性来实现。在服务端将数据包装为回调函数的调用，然后通过动态创建 <script> 标签的方式引入，使得浏览器可以正确解析并执行返回的数据。

// 创建一个script标签  
var script = document.createElement('script');  
// 设置请求地址  
script.src = 'http://example.com/api/data?callback=myCallback';  
// 定义回调函数  
window.myCallback = function(data) {  
    console.log(data);  
};  
// 将script标签添加到文档中  
document.body.appendChild(script);

在这个例子中，我们通过动态创建script标签，将请求发送到不同的源http://example.com/api/data?callback=myCallback。在服务器端，它会返回一个JSON字符串，其中包含数据和回调函数名。在客户端，当script标签加载完成后，回调函数会被执行，从而获取到服务器返回的数据。

2. CORS（跨域资源共享）

CORS是一种通过浏览器和服务器进行协商的方法，允许不同源的网页之间进行通信。CORS通过在服务器端设置Access-Control-Allow-Origin等响应头来实现跨域。在客户端发送请求时，浏览器会自动携带一些请求头，如Origin等。

服务器根据这些请求头来判断是否允许跨域请求，如果允许，则在响应头中添加Access-Control-Allow-Origin等响应头。客户端在收到响应后，检查响应头中的Access-Control-Allow-Origin等响应头，如果允许跨域请求，则可以获取响应数据。

客户端发送请求时携带Origin头：

var xhr = new XMLHttpRequest();  
xhr.open('GET', 'http://example.com/api/data', true);  
xhr.setRequestHeader('Origin', 'http://mywebsite.com');  
xhr.onreadystatechange = function () {  
    if (xhr.readyState == 4 && xhr.status == 200) {  
        console.log(xhr.responseText);  
    }  
};  
xhr.send();

服务器端设置响应头允许跨域请求：

Access-Control-Allow-Origin: http://mywebsite.com

3. 代理服务器

代理服务器是跨域问题的另一种解决方案。前端应用程序将请求发送给自己的服务器，然后由服务器转发请求到其他域，最后将响应返回给前端。

例如，前端应用程序请求数据的 URL 是 /data，而实际数据位于 http://api.example.com/data。通过代理服务器，可以将前端请求发送到 /api/data，然后代理服务器负责将请求转发到 http://api.example.com/data，并将响应返回给前端。

代理跨域解决方案是最安全的跨域解决方案，它通过设置代理服务器来实现不同源之间的通信。下面是一个使用Node.js创建代理服务器的示例代码：

创建代理服务器：

const http = require('http');  
const url = require('url');  
  
const proxy = http.createServer((req, res) => {  
  let parsedUrl = url.parse(req.url);  
  let options = {  
    hostname: parsedUrl.hostname,  
    port: parsedUrl.port || 80,  
    path: parsedUrl.path,  
    method: req.method,  
    headers: req.headers  
  };  
  
  let proxyReq = http.request(options, (proxyRes) => {  
    proxyRes.on('data', (chunk) => {  
      res.write(chunk);  
    });  
    proxyRes.on('end', () => {  
      res.end();  
    });  
  });  
  req.pipe(proxyReq);  
  proxyReq.pipe(res);  
});  
  
proxy.listen(8080);

在这个例子中，我们使用Node.js创建了一个HTTP代理服务器，它将在本地的8080端口上监听请求。当客户端发送请求到代理服务器时，代理服务器会将请求的URL解析为对象，然后根据该URL对象创建新的HTTP请求，并将原始请求的请求头和请求体传递给新的HTTP请求。然后，代理服务器将新的HTTP请求发送到目标服务器，并将目标服务器的响应返回给客户端。

使用该代理服务器的示例代码：

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

在这个例子中，我们将请求发送到本地的8080端口上的代理服务器，然后代理服务器将请求转发到目标服务器，并将目标服务器的响应返回给客户端。由于我们使用了代理服务器，所以可以绕过同源策略的限制，实现跨域。

4. postMessage()

如果前端应用程序需要与嵌入的 iframe 或跨窗口进行通信，可以使用 postMessage() 方法来发送跨域消息。

// 发送消息
otherWindow.postMessage('Hello', 'http://www.example.com');

// 接收消息
window.addEventListener('message', function(event) {
  if (event.origin === 'http://www.example.com') {
    // 处理接收到的消息
  }
});

上述代码中，otherWindow.postMessage() 方法用于向其他窗口发送消息，而 window.addEventListener('message', ...) 用于接收消息，并通过 event.origin 来判断消息来源是否为指定的域。