nginx怎么配置跨域？nginx文件服务器搭建教程

使用 root 或 alias 指令搭建高性能静态文件服务器
利用 autoindex 模块实现目录浏览功能
通过 add_header 指令解决前端跨域资源共享 (CORS) 问题
处理浏览器发送的 OPTIONS 预检请求
配置 Access-Control-Allow-Credentials 支持带凭证的跨域请求
设置 expires 指令优化静态资源缓存策略

1. Nginx 静态文件服务器搭建

1.1 基础配置与 root 指令详解

在构建一个高效的文件服务器时，Nginx 凭借其轻量级和高并发处理能力成为首选方案。搭建静态文件服务器的核心在于正确配置 server 块和 location 指令。首先，需要监听特定的端口，例如 8080 端口，并指定服务器域名或 IP 地址。接着，通过配置 root 指令来指定网站根目录，这是 Nginx 提供静态文件服务的基石。

当用户访问某个 URL 路径时，Nginx 会根据配置将 URL 路径映射到本地文件系统。例如，配置 location /static { root /data/www; }，当用户访问 http://example.com/static/css/style.css 时，Nginx 实际上会去寻找本地文件系统中的 /data/www/static/css/style.css。这种路径拼接规则是理解 Nginx 文件服务的关键，它决定了文件查找的路径准确性。正确配置 root 指令后，Nginx 能够直接响应浏览器请求，将静态资源如 HTML、图片、CSS 和 JS 文件传输给客户端，无需经过后端应用程序的动态解析，从而极大降低了服务器负载。

1.2 alias 指令的使用场景

虽然 root 指令非常常用，但在某些特定场景下，alias 指令更为灵活。当用户希望将 URL 中的特定前缀映射到文件系统中的不同位置，且该位置不包含 URL 中的前缀时，alias 是最佳选择。例如，项目结构中图片资源存放在 /var/www/project/images 目录下，但希望在网络上通过 /assets 路径访问这些图片。

此时，配置 location /assets { alias /var/www/project/images; }。当用户请求 http://example.com/assets/logo.png 时，Nginx 会直接定位到 /var/www/project/images/logo.png。与 root 指令将 URL 路径拼接到 root 指定路径末尾不同，alias 指令是完全替换 URL 中的 location 匹配部分。在使用 alias 时，必须注意路径末尾斜杠的处理，通常建议在 location 和 alias 的路径中都加上斜杠，以避免路径匹配错误导致的 404 错误。熟练掌握 alias 和 root 的区别，能够帮助开发者更精细地控制静态资源的访问路径。

1.3 目录索引与文件浏览设置

为了方便管理文件或分享资源，开启目录浏览功能显得尤为重要。Nginx 提供了 autoindex 模块来实现这一功能。默认情况下，Nginx 只在请求目录结束时自动查找索引文件（如 index.html），如果目录中没有索引文件，则返回 403 Forbidden 错误。开启 autoindex 后，Nginx 会生成一个类似 Windows 资源管理器的列表，展示目录下的文件和子目录。

配置 autoindex on; 即可启用此功能。为了提升用户体验，通常会配合 autoindex_exact_size off; 使用，这样显示的文件大小将以人类可读的格式（如 KB, MB）展示，而不是字节数。同时，设置 autoindex_localtime on; 可以让文件列表显示本地时间而非 UTC 时间。此外，add_header 指令可以用来美化目录页面，例如添加 X-Accel-Redirect 头部或自定义样式，使文件列表看起来更加专业。需要注意的是，在生产环境中，出于安全考虑，应谨慎开启目录浏览，防止敏感文件被意外暴露。

2. 处理前端跨域资源共享 (CORS) 问题

2.1 浏览器同源策略与跨域限制

在现代 Web 开发中，前后端分离架构已成为主流，前端应用通常部署在端口 3000 或 8080 上，而后端 API 或文件服务器可能部署在不同的域名或端口。浏览器为了安全，实施了严格的同源策略，即限制一个源的文档或脚本如何与另一个源的资源进行交互。如果前端向不同源的后端发送请求（例如 AJAX、Fetch 或 HTML5 跨域加载资源），浏览器会阻止响应的接收，并在控制台报错。

这种跨域限制主要针对以下操作：Cookie、LocalStorage 和 IndexedDB 访问、脚本执行、DOM 访问以及 AJAX 请求。为了打破这种限制，W3C 制定了一套标准，即跨域资源共享 (CORS)。Nginx 作为反向代理，可以通过配置响应头来告诉浏览器，“这个资源允许被其他域的脚本访问”。核心在于修改 HTTP 响应头，特别是 Access-Control-Allow-Origin，这是解决跨域问题的核心。

2.2 基础跨域响应头配置

配置跨域最直接的方法是在 Nginx 的 location 块中使用 add_header 指令添加 CORS 相关的响应头。最简单的配置是允许所有来源访问资源，通过设置 Access-Control-Allow-Origin: *。这意味着任何域名下的前端页面都可以请求该 Nginx 服务器上的资源。这种配置适用于纯静态资源（如图片、字体、CSS），因为这些资源通常不需要携带用户身份信息。

对于复杂的 API 接口或需要携带 credentials（如 Cookie、HTTP Authentication）的请求，不能使用通配符 *，因为浏览器会拒绝携带凭证的跨域请求。此时，必须将 Access-Control-Allow-Origin 设置为具体的域名，例如 http://localhost:3000。Nginx 支持在 add_header 中使用变量来动态设置允许的域名，例如 add_header Access-Control-Allow-Origin $http_origin;，这样可以根据请求来源动态返回允许的域名，既保证了安全性，又提供了灵活性。

2.3 处理预检请求 (OPTIONS)

并非所有的跨域请求都是简单的 GET 或 POST 请求。当浏览器发送跨域请求时，如果请求包含自定义头（如 Authorization）或使用了 PUT、DELETE 等非安全方法，浏览器会先发送一个 OPTIONS 请求，称为“预检请求”。预检请求用于询问服务器是否允许实际请求的跨域操作，以及允许使用哪些头信息和请求方法。

对于 Nginx 来说，必须正确处理 OPTIONS 请求，否则实际请求将被浏览器拦截。处理预检请求的关键在于确保 OPTIONS 请求也能返回正确的 CORS 头部，并且状态码为 200。通常使用 Nginx 的 if 语句结合 set 指令来实现这一逻辑。首先判断请求方法是否为 OPTIONS，如果是，则设置允许的方法列表（如 GET, POST, OPTIONS）并添加 CORS 头部，然后直接返回 204 No Content 停止后续处理。这样，浏览器在收到预检请求的 200 响应后，才会发送实际的请求。

2.4 带凭证的跨域资源共享

当应用需要登录态或 Session 认证时，跨域请求必须携带 credentials。这要求在 Nginx 配置中同时设置 Access-Control-Allow-Origin（具体域名）和 Access-Control-Allow-Credentials: true。然而，这两个配置存在冲突：当 Access-Control-Allow-Credentials 为 true 时，Access-Control-Allow-Origin 不能为 *，必须是具体的域名。

为了解决这个问题，可以在 Nginx 中利用 map 指令预先定义一个白名单，或者直接在 location 块中判断 request_method。对于需要凭证的请求，Nginx 需要解析请求头中的 Origin 字段，将其赋值给响应头。同时，必须确保前端在发起 AJAX 请求时设置 withCredentials: true。此外，还需要配置 Access-Control-Allow-Headers 来明确允许请求中携带的头部字段，例如 Content-Type 或自定义的业务头部，否则浏览器也会因为头部不匹配而拒绝请求。

3. 性能优化与安全加固

3.1 静态资源缓存策略

频繁请求相同的大型静态文件会浪费带宽并增加服务器压力。通过配置 expires 指令，可以有效地利用客户端缓存。当设置 expires 30d; 时，浏览器会告诉用户，对于匹配 location 的文件，缓存有效期为 30 天。在这 30 天内，即使服务器上的文件内容未改变，浏览器也会直接从本地缓存加载文件，而不是重新向 Nginx 请求。

这种策略极大地提升了用户体验，减少了网络延迟。通常，对于 CSS、JS 和图片等不常变更的资源，可以设置较长的过期时间（如 1 年）；而对于经常更新的 HTML 文件，则应设置较短的过期时间甚至不缓存（expires -1;），以确保用户总能获取到最新的页面内容。结合 add_header Cache-Control 使用，可以更精细地控制缓存行为，例如设置 no-cache 以允许服务器验证资源是否过期。

3.2 Gzip 压缩传输

在网络传输中，文本类文件（HTML、CSS、JS、XML）通常包含大量冗余字符。启用 Gzip 压缩可以显著减少传输数据量，加快页面加载速度。Nginx 提供了 gzip 模块，通过开启压缩功能，服务器会将响应内容在发送给客户端之前进行压缩，客户端收到后自动解压。对于文本文件，压缩比通常可达 70% 甚至更高。

配置 gzip on; 即可开启基础压缩。为了优化性能，通常建议设置 gzip_types，仅对特定类型的文件进行压缩，例如 text/plain、text/css、application/json、application/javascript 等。对于已经压缩过的二进制文件（如图片、视频），再次压缩不仅不会减小体积，反而会消耗 CPU 资源。同时，可以配置 gzip_min_length，只压缩大于一定字节的文件，以避免对小文本文件的压缩开销。

3.3 防盗链配置

如果 Nginx 文件服务器承载着高价值的资源（如视频、图片），防止其他网站恶意盗链（Hotlinking）至关重要。盗链不仅消耗了服务器的带宽，还可能导致服务器负载过高。Nginx 通过检查 HTTP 请求头中的 Referer 字段来实现防盗链。

配置方法是在 location 块中设置 valid_referers none blocked，后面跟着允许的域名列表（如 example.com www.example.com）。Nginx 会检查请求中的 Referer 头部。如果 Referer 不在白名单中，或者 Referer 为空（直接在浏览器地址栏输入 URL 访问），则匹配 if ($invalid_referer) { return 403; }，直接拒绝访问。这种方式简单有效，能有效遏制大部分未授权的图片和文件访问请求。

4. 常见配置参数对比

配置参数	功能描述	适用场景
root	将 URL 路径拼接在 root 路径之后	文件结构与 URL 路径一致时使用
alias	完全替换 URL 中匹配的 location 部分	文件结构与 URL 路径不一致时使用
autoindex	生成目录列表页面	需要浏览文件列表或分享资源时使用
Access-Control-Allow-Origin	指定允许跨域访问的源地址	解决浏览器跨域限制时使用
expires	设置响应头的缓存过期时间	优化静态资源加载性能时使用
gzip	对响应内容进行压缩	减少网络传输流量，提升加载速度

FAQ

配置了 Access-Control-Allow-Origin: *，为什么跨域请求还是失败？

除了跨域响应头，浏览器还会检查请求方法是否在允许列表中。如果前端使用了 PUT 或 DELETE 方法，或者发送了复杂的自定义头部，必须同时配置 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers，否则浏览器会阻止请求。此外，如果请求中开启了 withCredentials: true，则不能使用 * 作为源，必须指定具体域名。
alias 和 root 指令在配置路径时有什么区别？

root 指令会将 location 匹配到的路径追加到 root 指定的路径后面。例如，root 为 /data，location 为 /img，最终路径是 /data/img。alias 指令则是直接将 location 匹配到的路径替换为 alias 指定的路径。例如，alias /data，location 为 /img，最终路径是 /data。alias 通常用于文件路径与 URL 路径不一致的情况。
如何防止 Nginx 目录被直接扫描？

最直接的方法是不开启 autoindex 模块。如果必须开启用于分享文件，建议配合密码验证或限制访问 IP。另外，检查 Nginx 配置中是否有默认的 index 指令指向敏感文件（如 index.php），并将其重命名或删除，以防止通过 URL 访问敏感目录索引。
nginx 配置了 expires，如何确保用户获取到更新后的文件？

对于不常变化的文件（如 JS 库），长期缓存是合理的。对于经常变化的文件（如 HTML），应设置较短的 expires 时间或不缓存。如果必须强制更新，可以在文件名中加入版本号（如 style.v1.2.css），通过更改文件名来绕过缓存。
跨域请求返回 404 是因为 Nginx 配置问题吗？

跨域请求返回 404 通常不是 CORS 配置的问题，而是 Nginx 找不到对应的文件。请检查 root 或 alias 指令配置的文件路径是否正确，以及文件是否存在。确认文件权限是否允许 Nginx 用户读取。
如何只允许特定域名访问我的 Nginx 文件服务器？

可以通过配置 valid_referers 防盗链，但这只能阻止其他网站直接链接。要严格限制只有特定域名可以访问，建议结合 map 指令和 allow/deny 指令。在 location 块中，先判断 $http_referer 是否在白名单内，或者直接判断 $host 是否为指定域名。