使用 Nginx 巧妙解决跨域难题

前端

2024-01-19 18:54:37

跨域的本质

在前后端分离的开发场景中，前端和后端通常部署在不同的域名或端口上。当浏览器从一个域名的前端代码向另一个域名的后端服务器发送请求时，就会触发跨域问题。

跨域的限制是为了保护用户隐私和数据安全。浏览器会阻止跨域请求，除非服务器明确允许。

Nginx 处理跨域

Nginx 是一款流行的 Web 服务器，可以用来处理跨域请求。它提供了几种方法来配置跨域设置，包括：

CORS（跨域资源共享）： 允许指定域名的客户端访问受限资源。
服务器端代理： 通过代理服务器转发请求，避免跨域限制。
WebSocket： 一种双向通信协议，可以在不同的域之间建立持久连接。

CORS 配置

要在 Nginx 中配置 CORS，需要在服务器块中添加以下指令：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Credentials true;

这些指令允许来自所有来源（*）的请求，并允许客户端发送自定义标头（Authorization）和使用指定的 HTTP 方法（GET、POST、PUT、DELETE、OPTIONS）。

服务器端代理

如果 CORS 无法满足要求，可以使用服务器端代理来解决跨域问题。代理服务器位于前端和后端之间，它接收前端请求并转发到后端服务器。

在 Nginx 中，可以通过以下配置设置代理：

location /api {
  proxy_pass http://backend.example.com;
}

WebSocket

WebSocket 是一种双向通信协议，可以在不同的域之间建立持久连接。它可以用来实现实时数据流和双向通信。

在 Nginx 中，可以通过以下配置启用 WebSocket 支持：

location /websocket {
  proxy_pass http://backend.example.com;
  proxy_websocket on;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}