Bl_a_ck

【一文读懂】浏览器跨域访问问题及其解决方案

简介

浏览器的跨域访问问题（Cross-Origin Resource Sharing，CORS）是指在一个网页中，来自不同协议、域名或端口的请求会被浏览器视为跨域请求。浏览器的同源策略（Same-Origin Policy）出于安全性考虑，默认会阻止网页向不同源的资源发送请求。

同源策略（Same-Origin Policy）

同源策略是指：如果两个 URL 的协议、域名和端口完全相同，它们就被认为是“同源”。浏览器只允许同源的网页之间进行数据交换，不同源的网页之间默认是无法互相访问的。

同源策略的主要目的是防止恶意网站获取用户数据。例如，假设你登录了一个网站，恶意网站不能通过跨域请求窃取你在该网站上的数据。

为什么要有同源策略？

同源策略（Same-Origin Policy）是浏览器的一个安全特性，用来防止潜在的 跨站请求伪造（CSRF） 和 跨站脚本攻击（XSS）。这些攻击类型可以让恶意网站通过跨域请求窃取用户的敏感数据，甚至执行未经授权的操作。

跨域请求

跨域请求发生在以下几种情况：

协议不同：例如，http://example.com 和 https://example.com。
域名不同：例如，http://example.com 和 http://example.org。
端口不同：例如，http://example.com:80 和 http://example.com:8080。

解决方法

1. CORS（跨源资源共享）

CORS 是一种浏览器的机制，它允许 Web 页面向不同源的服务器发起请求。它通过在服务器的响应头中添加特定的字段，来告诉浏览器某个资源是可以跨域访问的。

CORS 机制：

当浏览器发起跨域请求时，浏览器会发送一个 预检请求（preflight request），该请求使用 OPTIONS 方法，并询问目标服务器是否允许跨域访问。
如果服务器允许跨域请求，它会在响应头中添加相应的 CORS 头部，浏览器在收到这些头部后会继续执行实际的请求。

CORS 响应头部：

Access-Control-Allow-Origin：指明允许哪些源访问资源。可以是具体的源（例如：http://example.com），也可以是通配符（*）表示允许所有源访问。
Access-Control-Allow-Methods：指定允许的 HTTP 请求方法（例如：GET, POST, PUT, DELETE）。
Access-Control-Allow-Headers：指定允许的请求头字段。
Access-Control-Allow-Credentials：指示是否允许携带认证信息（如 cookies）。

示例：

假设 http://example.com 的服务器允许来自 http://anotherdomain.com 的跨域请求，那么它的响应头可能如下：

Access-Control-Allow-Origin: http://anotherdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true

2. 代理服务器

使用 代理服务器 是解决跨域问题的一种常见方法。通过代理服务器，可以避免浏览器的同源策略限制，因为代理服务器充当了客户端与目标服务器之间的中介角色，将跨域请求转发到目标服务器并将响应返回给客户端，从而绕过浏览器的跨域限制。

1. 基本原理

当客户端发起跨域请求时，代理服务器接收该请求并将其转发到目标服务器。目标服务器响应的内容会通过代理服务器传递回客户端。由于客户端与目标服务器的直接交互被代理服务器替代，浏览器并不会直接识别跨域访问，从而解决了跨域问题。

客户端 → 代理服务器 → 目标服务器 → 代理服务器 → 客户端

2. 解决方案

1) 正向代理（Forward Proxy）

正向代理可以隐藏客户端的身份信息，通过代理服务器来发起请求。服务器的响应会先到代理服务器，再由代理服务器转发给客户端。这种方法适用于浏览器无法直接访问目标资源时，可以通过设置代理来解决访问问题。

流程：

客户端向代理服务器发送请求。
代理服务器转发请求到目标服务器。
目标服务器返回响应。
代理服务器将响应内容传递给客户端。

通过正向代理，客户端可以绕过同源策略的限制，访问本不允许直接访问的外部资源。

适用场景：

客户端访问被阻止的外部资源（例如，公司内部网络访问外部网站时使用代理）。
解决本地环境的跨域问题，特别是在开发阶段。

2) 反向代理（Reverse Proxy）

反向代理不同于正向代理，它是位于客户端和目标服务器之间，代理服务器代替多个后端服务器接收客户端的请求，并将请求转发到后端服务器。目标服务器对客户端来说是不可见的，客户端与代理服务器交互，代理服务器则把数据返回给客户端。

流程：

客户端请求被发送到反向代理服务器。
反向代理根据某些规则将请求转发给一个或多个后端服务器。
后端服务器处理请求并返回响应。
反向代理将响应返回给客户端。

适用场景：

当需要隐藏服务器的真实 IP 地址，提供负载均衡，或者是需要缓存数据时使用反向代理。
在 Web 应用中，反向代理可以作为一个 CORS 的解决方案。

3. 代码实现

以 Node.js 和 Express 框架为例，介绍如何设置代理服务器解决跨域问题。

示例：使用 Node.js 和 `http-proxy-middleware` 实现正向代理

# 安装 Express 和 http-proxy-middleware
npm install express http-proxy-middleware

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

// 设置代理
app.use('/api', createProxyMiddleware({
  target: 'https://target-server.com', // 目标服务器地址
  changeOrigin: true, // 修改请求头中的Origin字段，避免跨域问题
  pathRewrite: { '^/api': '' }, // 将请求路径中的 `/api` 前缀去掉
}));

// 启动服务器
app.listen(3000, () => {
  console.log('代理服务器运行在 http://localhost:3000');
});

工作原理：

客户端访问 http://localhost:3000/api/data。
代理服务器将请求转发到 https://target-server.com/data。
changeOrigin: true 将 Origin 请求头修改为目标服务器的域名，从而避免跨域问题。

示例：使用 Nginx 配置反向代理

Nginx 配置文件：

server {
    listen 80;

    server_name your-domain.com;

    location /api/ {
        proxy_pass http://target-server.com/;
        proxy_set_header Host target-server.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}