解决 Docker 容器中 Nginx 反向代理 CORS 跨域问题

前言

在前端开发中，CORS（Cross-Origin Resource Sharing）跨域资源共享是一个常见的问题。在前后端分离的架构中，前端代码通常放置在一个独立的服务器上，而数据接口则放置在另一个独立的服务器上，这时候就需要使用跨域技术来进行跨域请求。

在使用 Docker 部署应用时，我们通常会使用多个容器来分别运行前端和后端服务。在这种情况下，需要使用 Nginx 等反向代理服务器来实现跨域请求。

本文将详细介绍如何在 Docker 容器中使用 Nginx 反向代理解决 CORS 跨域问题。

解决方法

配置反向代理

我们可以通过配置 Nginx 反向代理来实现跨域请求。

首先，我们需要在 Nginx 的配置文件中添加以下代码：

// javascriptcn.com 代码示例
location /api {
    proxy_pass http://backend_server:port;
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'origin, content-type, accept, Authorization';
    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' 'origin, content-type, accept, Authorization';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

以上代码表示，对于所有访问 /api 开头的 URL 的请求，将其转发到 http://backend_server:port，并添加跨域相关的 HTTP 响应头。

其中，backend_server 表示后端服务所在的服务器 IP 或域名，port 表示后端服务提供的端口号。

通过以上配置，我们就成功地实现了跨域请求。

配置 Nginx Docker 容器

下面，我们需要将 Nginx 配置到 Docker 容器中。我们可以使用 Dockerfile，将以下代码添加到 Dockerfile 中：

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

以上代码表示，基于官方的 Nginx 镜像构建 Docker 镜像，并将本地的 nginx.conf 文件复制到 Docker 容器的 /etc/nginx/nginx.conf 路径下，在 Docker 容器中暴露 80 端口，并启动 Nginx。

配置 Nginx 配置文件

最后，我们需要在本地创建并编写 nginx.conf 文件，以配置 Nginx。

// javascriptcn.com 代码示例
http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 设置日志格式及路径
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    error_log /var/log/nginx/error.log;

    # 设置上游后端服务器
    upstream backend_server {
        server backend_server_1:port weight=10;
        server backend_server_2:port weight=10;
    }

    # 配置反向代理
    server {
        listen 80;
        server_name localhost;

        location /api {
            proxy_pass http://backend_server;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            add_header 'Access-Control-Allow-Headers' 'origin, content-type, accept, Authorization';
            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' 'origin, content-type, accept, Authorization';
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                return 204;
            }
        }

        # 配置根目录
        location / {
            root /usr/share/nginx/html;
            index index.html;
        }

        # 配置静态资源目录
        location /static/ {
            root /usr/share/nginx/html;
        }
    }
}

以上代码表示，先设置 Nginx 的日志格式及路径，然后配置上游后端服务器。注意，这里需要将 backend_server_1 和 backend_server_2 改为后端服务器的 IP 或域名，并将 port 改为后端服务器提供的端口号。

最后，我们配置反向代理，并设置根目录和静态资源目录。

将上述代码保存到本地的 nginx.conf 文件中，并将其复制到 Docker 容器中。

示例代码

最终的示例代码如下：

nginx.conf

// javascriptcn.com 代码示例
http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 设置日志格式及路径
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    error_log /var/log/nginx/error.log;

    # 设置上游后端服务器
    upstream backend_server {
        server backend_server_1:port weight=10;
        server backend_server_2:port weight=10;
    }

    # 配置反向代理
    server {
        listen 80;
        server_name localhost;

        location /api {
            proxy_pass http://backend_server;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            add_header 'Access-Control-Allow-Headers' 'origin, content-type, accept, Authorization';
            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' 'origin, content-type, accept, Authorization';
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                return 204;
            }
        }

        # 配置根目录
        location / {
            root /usr/share/nginx/html;
            index index.html;
        }

        # 配置静态资源目录
        location /static/ {
            root /usr/share/nginx/html;
        }
    }
}

Dockerfile

FROM nginx

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

总结

在 Docker 容器中使用 Nginx 反向代理解决 CORS 跨域问题非常方便。通过本文的介绍，您现在已经学习了如何配置 Nginx 反向代理和 Docker 容器，以及如何编写反向代理的配置文件。希望本文对您有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653500f47d4982a6ebad3c8d