手把手教你用 Nginx 解决跨域问题（含 HTTPS 配置）

在网站开发过程中，跨域问题常常让人头疼不已。不过别担心，今天就来给大家详细讲讲如何利用 Nginx 轻松解决跨域问题，并且把涉及到 HTTPS 的 443 端口加密相关配置也一并奉上。

一、跨域问题的产生

当我们的前端页面部署在一个域名（比如：http://frontend.com）下，而后端接口却在另一个域名（比如：http://backend.com）上时，浏览器出于安全考虑，会阻止前端页面直接向不同源的后端接口发起请求，这就产生了跨域问题。

二、Nginx 解决跨域的原理

Nginx 主要通过反向代理和设置 CORS（跨域资源共享）响应头来解决跨域问题。它就像是一个中间人，前端请求先到达 Nginx 服务器，Nginx 再将请求转发到后端服务器，这样对于浏览器来说，它认为自己只是在和同域的 Nginx 服务器通信，从而绕过了跨域限制。

三、Nginx 解决跨域的配置步骤

（一）基础配置（HTTP）

首先，找到 Nginx 的配置文件，一般在/etc/nginx/nginx.conf或者/etc/nginx/sites-available/目录下的相关配置文件，以常见的default配置文件为例进行编辑。

server {
listen       80;
server_name  example.com;
location / {
# 反向代理设置
proxy_pass http://backend-server:8080;
proxy_set_header Host $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;
# CORS响应头配置
add_header 'Access-Control-Allow-Origin' 'http://frontend.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept';
add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range';
# 处理OPTIONS请求
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'http://frontend.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept';
add_header 'Access-Control-Max-Age' 86400;
return 204;
}
}
}

在上述配置中：

• listen 80表示 Nginx 在 80 端口监听 HTTP 请求。

• server_name填写你的域名，要与实际访问的域名一致。

• proxy_pass指向后端服务器的地址和端口，这里假设后端服务在http://backend-server:8080。

• proxy_set_header指令用于在转发请求时，保留客户端的一些关键信息，以便后端服务器能正确处理请求。

• add_header部分就是设置 CORS 响应头，Access-Control-Allow-Origin指定了允许跨域访问的前端域名；Access-Control-Allow-Methods列举了允许的请求方法；Access-Control-Allow-Headers规定了允许的请求头；Access-Control-Expose-Headers告知浏览器后端响应中哪些自定义头字段可以被访问。

• if语句块专门处理 OPTIONS 预检请求，为其添加合适的响应头，并返回 204 状态码，表示请求成功处理，后续真实请求就可以正常发送了。

（二）HTTPS 配置（443 端口）

如果你的网站使用了 HTTPS，那么还需要对 443 端口进行加密相关的配置。

server {
listen       443 ssl;
server_name  example.com;
# SSL证书和私钥路径
ssl_certificate     /path/to/your_domain.com.crt;
ssl_certificate_key /path/to/your_domain.com.key;
# 优化SSL配置，提升安全性
ssl_protocols       TLSv1.2 TLSv1.3;
ssl_ciphers         HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://backend-server:8080;
proxy_set_header Host $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;
add_header 'Access-Control-Allow-Origin' 'http://frontend.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept';
add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'http://frontend.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept';
add_header 'Access-Control-Max-Age' 86400;
return 204;
}
}
}

这里：

• listen 443 ssl表示在 443 端口监听 HTTPS 请求。

• ssl_certificate和ssl_certificate_key分别指定 SSL 证书和对应的私钥文件路径，这两个文件是从证书颁发机构获取（或自行生成）的，用于加密和解密 HTTPS 通信，务必妥善保管。

• ssl_protocols指定支持的 SSL/TLS 协议版本，这里选择了TLSv1.2和TLSv1.3，它们相对较新且安全性更高，排除了老旧且存在安全风险的协议版本。

• ssl_ciphers用来定义允许使用的加密算法组合，HIGH:!aNULL:!MD5表示选用高强度加密算法，排除了空加密算法（aNULL）和存在安全漏洞的 MD5 加密算法。

• ssl_prefer_server_ciphers开启后，Nginx 会优先选用服务器端配置的加密算法，增强安全性。

• 其余部分的配置与 HTTP 配置中的location块内容一致，同样是进行反向代理和 CORS 响应头的设置，用于解决跨域问题。

四、总结

通过以上对 Nginx 的配置，无论是 HTTP 还是 HTTPS 环境下的跨域问题都能得到有效解决。在实际应用中，大家可以根据自己的服务器架构和域名设置，灵活调整 Nginx 的配置参数，让前后端的通信更加顺畅无阻。希望这篇文章能帮助大家顺利解决跨域难题，祝大家开发顺利！