当前位置：首页 > 服务器技术 > 正文

Nginx虚拟主机跨域配置（手把手教你解决前端跨域问题）

在现代Web开发中，前后端分离架构非常常见。前端项目运行在如 http://localhost:3000，而后端API部署在如 http://api.example.com，这时浏览器出于安全考虑会阻止跨源请求，这就是我们常说的“跨域问题”。

如果你使用 Nginx 作为反向代理或静态资源服务器，那么通过配置 Nginx 虚拟主机来解决跨域问题是一个高效、稳定的方法。本文将从零开始，详细讲解如何为 Nginx 虚拟主机添加跨域支持，即使你是新手也能轻松上手！

Nginx虚拟主机跨域配置（手把手教你解决前端跨域问题） Nginx跨域配置虚拟主机设置 CORS解决方案 Nginx教程第1张

什么是跨域（CORS）？

跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种机制，允许网页向不同源（协议、域名、端口任一不同即为不同源）的服务器发起请求。浏览器默认禁止这类请求，除非服务器明确允许。

为什么用 Nginx 解决跨域？

相比在后端代码中逐个接口添加 CORS 头，通过 Nginx 统一处理更简洁、高效，且不依赖具体编程语言。尤其适合静态资源服务或 API 网关场景。

准备工作

已安装 Nginx（Linux/macOS/Windows 均可）
拥有服务器 root 权限或可编辑 Nginx 配置文件
知道你的网站配置文件位置（通常在 /etc/nginx/sites-available/ 或 /usr/local/nginx/conf/）

步骤一：找到你的虚拟主机配置文件

假设你有一个网站 example.com，其 Nginx 配置可能如下：

server {    listen 80;    server_name example.com;    root /var/www/html;    index index.html;    location / {        try_files $uri $uri/ =404;    }}

步骤二：添加跨域头信息

在 server 块中添加以下 CORS 相关头部。你可以根据实际需求调整允许的来源、方法和头部。

server {    listen 80;    server_name example.com;    root /var/www/html;    index index.html;    # 添加跨域支持    add_header 'Access-Control-Allow-Origin' '*';    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';    location / {        try_files $uri $uri/ =404;    }    # 处理预检请求（OPTIONS）    location / {        if ($request_method = 'OPTIONS') {            add_header 'Access-Control-Allow-Origin' '*';            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';            add_header 'Access-Control-Max-Age' 1728000;            add_header 'Content-Type' 'text/plain; charset=utf-8';            add_header 'Content-Length' 0;            return 204;        }    }}

说明：

Access-Control-Allow-Origin: * 表示允许所有域名访问。生产环境中建议替换为具体域名，如 https://your-frontend.com，以提高安全性。
OPTIONS 是浏览器发送的“预检请求”，用于确认服务器是否允许实际请求。必须正确响应，否则跨域失败。
return 204; 表示无内容响应，符合 OPTIONS 请求规范。