Nginx 的简单端口转发和跨域相关的知识点

本文链接：https://blog.youkuaiyun.com/JBnoJB/article/details/143775928

简单的端口转发

sudo nano /etc/nginx/sites-available/default

然后输入我要指定的端口和转发的服务，例如：

server {
    listen 9090;  # 新的端口，例如 9090
    server_name your_public_ip;  # 公网 IP

    location / {
        proxy_pass http://192.168.x.x: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;
    }
}

然后再重启即可

sudo systemctl restart nginx

Nginx跨域

Nginx 跨域指的是使用 Nginx 配置跨域资源共享（CORS，Cross-Origin Resource Sharing），从而允许浏览器通过特定的设置访问其他域名下的资源。跨域问题通常发生在前端页面和后端服务器不在同一个域名下时，而现代浏览器出于安全原因，会默认阻止跨域请求，导致前端无法从不同源获取资源。

什么是跨域

跨域是指在浏览器中，一个网页向不同源（协议、域名或端口不同）的服务器发出请求。这种请求被称为“跨域请求”。例如：

不同的域名：http://example.com 请求 http://another-domain.com
不同的端口：http://example.com:8080 请求 http://example.com:3000
不同的协议：http://example.com 请求 https://example.com

CORS 背景

为了保护用户隐私和防止恶意行为，浏览器对跨域请求施加了限制，只有在服务器明确授权的情况下，才允许浏览器进行跨域资源的访问。这个授权机制就是跨域资源共享（CORS）。

Nginx 跨域的常见场景

通常，Nginx 会作为 Web 服务器或反向代理服务器，用来处理来自不同源的请求。当我们希望通过 Nginx 来允许某些特定的跨域请求时，可以在 Nginx 配置文件中添加相应的 CORS 配置。

常见的场景包括：

前后端分离的应用：
- 前端应用和后端 API 部署在不同的域名、端口或协议下。
- 例如，前端部署在 http://frontend.example.com，后端 API 在 http://api.example.com，前端页面请求后端 API 时触发跨域请求。
多站点应用：
- 不同的子域之间需要共享资源。例如，http://app.example.com 需要访问 http://api.example.com 的数据。
静态资源跨域：
- 当 Web 应用需要从第三方源加载图片、字体等静态资源时，也会触发跨域请求。

Nginx 配置跨域

要在 Nginx 中配置 CORS，可以在服务器的 Nginx 配置文件中为特定的路径或域名添加 CORS 头信息。示例配置如下：

server {
    listen 80;
    server_name api.example.com;

    location / {
        add_header 'Access-Control-Allow-Origin' 'http://frontend.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'http://frontend.example.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Content-Length' '0';
            add_header 'Content-Type' 'text/plain';
            return 204;
        }

        # 其他配置
        proxy_pass http://backend_server;
    }
}

配置说明

Access-Control-Allow-Origin：指定允许的跨域请求源，http://frontend.example.com 表示只有该源可以发起请求，通配符 '*' 则表示允许所有源。
Access-Control-Allow-Methods：指定允许的请求方法，例如 GET, POST, OPTIONS。
Access-Control-Allow-Headers：指定允许的请求头，例如 Authorization, Content-Type 等。
Access-Control-Allow-Credentials：如果需要携带 Cookie 或认证信息，将其设置为 true，并且 Access-Control-Allow-Origin 不能为通配符 '*'。