在介绍反向代理之前，先来了解一下正向代理。

正向代理

正向代理：如果把局域网外的Internet想象成一个巨大的资源库，则局域网中的客户端要访问Internet，则需要通过代理服务器来访问，这种代理服务就称为正向代理。

反向代理

反向代理服务器位于用户与目标服务器之间，但是对于用户而言，反向代理服务器就相当于目标服务器，即用户直接访问反向代理服务器就可以获得目标服务器的资源。同时，用户不需要知道目标服务器的地址，也无须在用户端作任何设定。反向代理服务器通常可用来作为Web加速，即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载，提高访问效率。

下面是正向代理与反向代理的原理图

微信截图_20230517111152.jpg

nginx反向代理配置语法

proxy_pass

该指令用来设置被代理服务器地址，可以是主机名称、IP地址加端口号形式。

# 设置被代理服务器地址为 http://localhost:9000/
proxy_pass http://localhost:9000/

proxy_set_header

该指令可以更改Nginx服务器接收到的客户端请求的请求头信息，然后将新的请求头发送给代理的服务器

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for；

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Forwarded-Uri $request_uri;

$http_host：代理服务器本身IP。
$remote_addr：前一节点的IP，并不一定是用户的真实IP
$proxy_host：代理服务器请求的host，即后端服务器/源站的IP，后端服务器有可能还是代理服务器
$proxy_port：代理服务器请求的后端服务器的端口
$http_x_real_ip：获取的是前一节点的X-Real-IP的值
$proxy_add_x_forwarded_for：获取的是前一节点的X-Forwarded-For的值。

X-Real-IP 客户端或上一级代理ip
X-Real-Port 客户端或上一级端口
X-Forwarded-For 包含了客户端和各级代理ip的完整ip链路

什么是跨域

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的。javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port)。

使用nginx反向代理解决跨域

前端在页面中调用接口

// 前端调用接口
axios.get('/api/portal/list')

nginx配置代理转发

# nginx 配置转发
location /api/ {
    proxy_pass http://localhost:9000/;
}

将 /api/开头的请求转发到 http://localhost:9000/ 服务中从而解决跨域

Nginx反向代理解决前端跨域问题