原生JS中怎么跨域

使用原生JavaScript跨域的方法包括JSONP、CORS、服务器代理、HTML5的postMessage等，其中CORS（跨域资源共享）是最常用和最推荐的方法。 下面将详细介绍CORS的实现方式，帮助你理解和应用这种技术。

CORS 是一种 HTTP 头机制，允许服务器表明来自其他源的请求是被允许的。CORS 机制通过在服务器端配置响应头，使得浏览器能够与其他来源的资源进行交互。具体来说，当浏览器发起跨域请求时，服务器会在响应头中加入一些特定的字段，表明哪些源是被允许访问的。下面将详细介绍如何在服务器端和客户端实现CORS。

一、CORS 详解

1、CORS 基本原理

CORS 基本原理是通过服务器在响应头中设置特定的字段，告诉浏览器哪些源是被允许访问的。常见的响应头字段包括：

Access-Control-Allow-Origin：指定允许访问的源，可以是具体的域名、*（表示所有域名）或 null（表示不允许任何域名）。
Access-Control-Allow-Methods：指定允许的HTTP方法，如GET、POST、PUT、DELETE等。
Access-Control-Allow-Headers：指定允许的请求头字段。
Access-Control-Allow-Credentials：指定是否允许发送Cookie。
Access-Control-Max-Age：指定预检请求的结果能够被缓存的时间。

2、简单请求与复杂请求

根据请求的复杂程度，CORS 请求分为简单请求和复杂请求。

简单请求：

使用 GET、POST、HEAD 方法。
不包含自定义请求头。
Content-Type 限制为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。

复杂请求：

使用除 GET、POST、HEAD 之外的方法。
包含自定义请求头。
Content-Type 不为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。

复杂请求在正式请求之前，会先发起一个预检请求（OPTIONS 方法），用来询问服务器是否允许该实际请求。

3、服务器端实现CORS

以Node.js和Express为例，介绍如何在服务器端实现CORS。

const express = require('express');
const app = express();
// 允许所有源访问
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello, CORS!' });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

4、客户端实现CORS

在客户端使用原生JavaScript发起跨域请求，可以通过 XMLHttpRequest 或 fetch 方法。

// 使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/api/data', true);
xhr.withCredentials = true; // 如果需要发送Cookie
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  }
};
xhr.send();
// 使用fetch
fetch('http://localhost:3000/api/data', {
  method: 'GET',
  credentials: 'include' // 如果需要发送Cookie
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

二、JSONP 实现跨域

JSONP（JSON with Padding）是一种跨域请求的数据传输方式。它通过动态插入 <script> 标签来实现跨域请求，利用 <script> 标签没有跨域限制的特点来实现。

1、JSONP 的原理

JSONP 的原理是服务器返回一个包装了 JSON 数据的 JavaScript 函数调用。客户端通过动态创建 <script> 标签并设置其 src 属性来请求服务器数据，服务器返回的数据会调用客户端预先定义的回调函数。

2、服务器端实现JSONP

以Node.js和Express为例，介绍如何在服务器端实现JSONP。

const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'Hello, JSONP!' };
  res.send(`${callback}(${JSON.stringify(data)})`);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3、客户端实现JSONP

在客户端使用原生JavaScript实现JSONP，可以通过动态创建 <script> 标签来发起请求。

function jsonpRequest(url, callback) {
  const script = document.createElement('script');
  const callbackName = 'jsonpCallback_' + Math.random().toString(36).substr(2);
  window[callbackName] = function(data) {
    callback(data);
    document.body.removeChild(script);
    delete window[callbackName];
  };
  script.src = `${url}?callback=${callbackName}`;
  document.body.appendChild(script);
}
jsonpRequest('http://localhost:3000/api/data', function(data) {
  console.log(data);
});

三、服务器代理实现跨域

通过服务器代理实现跨域请求是另一种常用的方法。客户端请求同源服务器，服务器再请求目标服务器，最终将目标服务器的响应返回给客户端。

1、服务器端实现代理

以Node.js和Express为例，介绍如何在服务器端实现代理。

const express = require('express');
const request = require('request');
const app = express();
app.get('/proxy', (req, res) => {
  const targetUrl = 'http://example.com/api/data';
  request(targetUrl, (error, response, body) => {
    if (!error && response.statusCode === 200) {
      res.send(body);
    } else {
      res.status(500).send('Error');
    }
  });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2、客户端请求代理服务器

在客户端使用原生JavaScript发起请求，可以通过 XMLHttpRequest 或 fetch 方法。

// 使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/proxy', true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  }
};
xhr.send();
// 使用fetch
fetch('http://localhost:3000/proxy', {
  method: 'GET'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

四、HTML5 postMessage 实现跨域

postMessage 是 HTML5 提供的一个 API，用于实现跨域通信。它允许不同源的窗口进行安全通信。

1、postMessage 的原理

postMessage 方法可以将消息发送到跨域的另一个窗口或 iframe 中。接收消息的一方需要设置一个事件监听器来处理接收到的消息。

2、使用 postMessage 实现跨域通信

假设我们有一个父窗口和一个嵌套的 iframe，父窗口和 iframe 来自不同的源。

父窗口代码：

<!DOCTYPE html>
<html>
<head>
  <title>Parent Window</title>
</head>
<body>
  <iframe id="childFrame" src="http://child-domain.com/child.html"></iframe>
  <button onclick="sendMessage()">Send Message</button>
  <script>
    const childFrame = document.getElementById('childFrame');
    function sendMessage() {
      const message = 'Hello from Parent';
      childFrame.contentWindow.postMessage(message, 'http://child-domain.com');
    }
    window.addEventListener('message', function(event) {
      if (event.origin === 'http://child-domain.com') {
        console.log('Received message:', event.data);
      }
    });
  </script>
</body>
</html>

子窗口（iframe）代码：

<!DOCTYPE html>
<html>
<head>
  <title>Child Window</title>
</head>
<body>
  <script>
    window.addEventListener('message', function(event) {
      if (event.origin === 'http://parent-domain.com') {
        console.log('Received message:', event.data);
        event.source.postMessage('Hello from Child', event.origin);
      }
    });
  </script>
</body>
</html>

在上面的例子中，父窗口通过 postMessage 方法向子窗口发送消息，子窗口通过事件监听器接收消息并返回消息给父窗口。

五、总结

跨域问题是Web开发中常见的问题，解决跨域问题的方法有多种。在原生JavaScript中，常用的方法包括CORS、JSONP、服务器代理和HTML5的postMessage。CORS 是最常用和最推荐的方法，因为它是标准的、现代的解决方案，支持各种复杂的请求类型和安全性控制。JSONP 和服务器代理也是常见的解决方案，但它们有各自的局限性。HTML5 的 postMessage 则适用于需要在不同源的窗口之间进行安全通信的场景。

在实际开发中，选择合适的跨域解决方案取决于具体的需求和场景。通过掌握这些方法，你可以在不同的跨域场景中游刃有余，提升Web应用的用户体验和安全性。