第 4 卷

第 4 / 10 卷日期：2025-12-31

请求，代理服务器根据规则转发请求到后端真实服务器，客户端只知道代理服务器的地址，不知道真实后端服务器的地址。

核心特征

典型应用场景

13. 描述如何使用Nginx作为解决跨域问题的一种方法，并概述其工作原理

利用反向代理规避浏览器的同源策略限制：前端请求同源的Nginx代理服务器，Nginx再将请求转发到跨域的后端接口服务器，由于浏览器只校验前端与Nginx的同源性，而Nginx与后端服务器的通信是服

务器间请求，无跨域限制，从而实现跨域请求。

步骤2：修改Nginx配置文件（nginx.conf）

核心配置：在 http{} 中添加 server{}，配置同源代理地址和跨域接口转发规则，并开启CORS跨域头。

Code block

1http { 2server {

3listen 80; # 前端访问的Nginx端口（与前端同源，如http://localhost:80）

4server_name localhost; # 前端域名，与前端页面一致 5

6	#配置跨域接口转发规则：匹配/api开头的请求
7	location /api {
8	# 1.转发到真实的跨域后端接口地址
9	proxy_pass http://192.168.1.100:3000;#后端接口地址（跨域地址）
10	# 2.传递请求头，保留客户端真实信息
11	proxy_set_header Host $host;
12	proxy_set_header X-Real-IP $remote_addr;
13	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
14	proxy_set_header X-Forwarded-Proto $scheme;

15 16# 3. 开启CORS跨域头（可选，兜底保障）

17add_header Access-Control-Allow-Origin *; # 允许所有域名跨域，生产环境指定具体域名

18add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; # 允许的请求方法

19add_header Access-Control-Allow-Headers Content-Type,Authorization; # 允许的请求头

20add_header Access-Control-Allow-Credentials true; # 允许携带Cookie 21

22	# 4.处理OPTIONS预检请求（必配，AJAX跨域会先发预检请求）
23	if ($request_method = OPTIONS) {
24	return 204;#预检请求直接返回204，不转发到后端
25	}
26	}
27	}
28 }

步骤3：前端请求配置

4console.log(res.data);

5});

步骤4：重启Nginx生效

Code block

1# Windows 2nginx -s reload

3# Linux/Mac 4sudo nginx -s reload

http://www.xxx.com），避免安全风险；

Control-Allow-Credentials: true、 Access-Control-Allow-Origin 为具体域名（非*）。

浏览器的事件循环是单线程的JS引擎处理异步任务的核心机制，由于JS是单线程，无法同时执行多个任务，事件循环通过任务队列的方式，将同步任务和异步任务按顺序执行，实现非阻塞的异步执行效

果，保证页面不卡死。

全站分卷索引 · 10 卷