二十五：如何“合法”地跨域访问？

跨域访问（Cross-Origin Resource Sharing，简称CORS）是现代Web开发中常见的一种技术需求。由于浏览器的同源策略（Same-Origin Policy），不同域名、协议或端口之间的资源无法直接交互，这对前端开发者带来了挑战。然而，通过合法的跨域访问技术，开发者可以绕过这些限制，安全地进行跨域请求。本文将介绍如何合法地实现跨域访问，并解释相关的技术和最佳实践。

1. 什么是跨域访问？

跨域访问指的是在一个域名的网页中，通过JavaScript向另一个域名的服务器发起请求，获取资源。由于浏览器的同源策略，来自不同源（即不同域名、协议、端口的组合）的网页无法直接相互访问数据。这种策略是为了保护用户的隐私和安全，避免恶意网站窃取用户数据。

示例：

网页 https://www.example.com 试图从 https://api.example.com 请求数据。
网页 https://www.example.com 试图从 https://api.different.com 请求数据。

在同源策略下，第一个请求是允许的，因为它们属于相同的域，但第二个请求就会被阻止。

2. 合法的跨域访问方法

要合法地实现跨域访问，必须采用一些方法来解决同源策略的限制。以下是几种常用的合法跨域访问技术：

2.1 跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）是最常见的跨域访问解决方案。它是一个浏览器端的机制，通过在服务器的响应头中添加特定的跨域信息，允许客户端（通常是JavaScript代码）跨域访问服务器资源。

CORS 的工作原理：

简单请求（Simple Requests）：浏览器发起跨域请求时，会检查请求是否符合“简单请求”的标准。符合条件时，浏览器会自动发送带有CORS头部的请求。
预检请求（Preflight Request）：对于一些复杂请求（如使用PUT、DELETE方法，或自定义头部的请求），浏览器会先发送一个OPTIONS请求来确认目标服务器是否允许跨域访问。如果服务器允许，则继续发送实际的请求。

CORS 响应头：

Access-Control-Allow-Origin：指定哪些源可以访问资源。例如，Access-Control-Allow-Origin: * 允许所有来源的请求，或指定特定域名如 Access-Control-Allow-Origin: https://www.example.com。
Access-Control-Allow-Methods：允许哪些HTTP方法进行跨域访问，例如 GET, POST, PUT, DELETE 等。
Access-Control-Allow-Headers：允许跨域请求中携带哪些自定义头部。
Access-Control-Allow-Credentials：是否允许携带用户凭证（如cookie），Access-Control-Allow-Credentials: true。

CORS 的优点：

安全性较高，由服务器决定是否允许跨域访问。
支持多种HTTP方法和自定义请求头。

示例：

Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

2.2 JSONP（JSON with Padding）

JSONP是一种绕过同源策略的技术，允许从服务器获取JSON格式的数据。它通过动态创建<script>标签来进行跨域请求。由于<script>标签不受同源策略的限制，因此可以跨域加载脚本。

使用方式：

在请求中传递一个回调函数名，服务器返回一个调用该回调函数的JavaScript代码，代码中包含数据。
浏览器执行返回的JavaScript代码，并通过回调函数处理数据。

优点：

实现简单，可以用于GET请求。
不依赖CORS，适用于不支持CORS的浏览器或旧浏览器。

缺点：

只能处理GET请求，不能进行其他HTTP方法的请求。
安全性较差，因为它允许执行服务器返回的JavaScript代码，可能会导致XSS攻击。

示例：

<script src="https://api.example.com/data?callback=handleResponse"></script>

function handleResponse(data) {console.log(data);
}

2.3 代理服务器

如果服务器不支持CORS或JSONP，另一种常见的做法是使用代理服务器。通过在前端和目标服务器之间设置一个代理，前端请求可以先发送到自己的服务器，代理服务器再向目标服务器发起请求，最后将结果返回给前端。

代理的工作原理：

前端发送请求到本地代理服务器。
代理服务器再发送请求到目标服务器。
目标服务器返回数据给代理服务器，代理服务器将数据转发给前端。

优点：

可以绕过跨域限制，支持任何HTTP方法。
可以在代理服务器中添加安全性验证、缓存等功能。

示例（Node.js代理）：

const express = require('express');
const axios = require('axios');
const app = express();app.get('/api', async (req, res) => {try {const response = await axios.get('https://api.example.com/data');res.json(response.data);} catch (error) {res.status(500).send('Error fetching data');}
});app.listen(3000, () => {console.log('Proxy server running on http://localhost:3000');
});

2.4 WebSocket

WebSocket是一种基于TCP的协议，允许在客户端和服务器之间建立持久的双向通信连接。它不像HTTP请求那样受同源策略的限制，因此可以用于跨域通信。

优点：

支持双向实时通信。
不受同源策略限制，可以跨域连接。

示例：

const socket = new WebSocket('wss://example.com/socket');
socket.onopen = function() {console.log('WebSocket connected');
};
socket.onmessage = function(event) {console.log('Message from server: ', event.data);
};