通过Nginx代理转发配置实现跨域的方法（API代理转发）

发布时间：2024/02/09

接下来我会详细讲解通过Nginx代理转发配置实现跨域的方法。这种方法通常用于解决前端应用在访问不同域的API服务时会存在的跨域问题。

简介

跨域是指浏览器从一个域名的网页去请求另一个域名的资源，这里的域名可以理解为协议、主机名、端口号的组合。通常情况下，浏览器限制了脚本中发起跨域HTTP请求。这种安全机制可以有效的防止一些跨站攻击，并保证用户的安全。但是在前后端分离开发中，要连接到不同的API服务，往往就会遇到跨域问题。这时，我们可以通过配置一个Nginx代理服务，在代理服务中转发请求，以实现跨域访问。

实现步骤

以下是通过Nginx代理转发配置实现跨域的主要步骤：

1. 安装Nginx

如果你没有Nginx，需要首先安装Nginx。可以通过包管理器来安装，例如：

# On Ubuntu/Debian
sudo apt-get update
sudo apt-get install nginx

# On CentOS/Fedora
sudo yum update
sudo yum install nginx

2. 配置Nginx

首先，我们需要配置Nginx。可以通过修改Nginx的默认配置文件/etc/nginx/nginx.conf，在http 块内添加以下内容：

http{
  # 设置日志级别
  error_log /var/log/nginx/error.log;
  access_log /var/log/nginx/access.log combined;

  # 设置允许的域名和请求方法
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

  # 配置 API 路由规则
  location /api/ {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  # 其他配置，如gzip, https 等
  ...
}

上述配置的作用是：
- 设置允许跨域访问；
- 配置 /api/ 的路由规则，代理到本地的 3000 端口；
- 配置一些其他的 HTTP 选项（例如 gzip）。

3. 修改API请求地址

在前端代码中，将原本的API调用地址改为代理地址，例如：

axios.get('/api/user/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上述示例中的/api会被Nginx代理到本地的3000端口，最终得到API的响应。

4. 重启Nginx

完成上述步骤后，需要重新启动Nginx，使配置生效。可以使用以下命令进行管理：

# 检查配置是否正确
sudo nginx -t

# 重启Nginx
sudo systemctl restart nginx

示例说明

以下是两个示例说明，帮助理解如何通过Nginx代理转发配置实现跨域。

如果API服务的地址是http://localhost:3000，前端应用的地址是http://localhost:8080。可以在Nginx中配置如下内容：

server {
    listen 8080;
    server_name localhost;

    # 配置允许跨域请求
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

    # 配置路由规则，将请求代理到本地的 3000 端口
    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 其他配置
    ...
}

如果API服务的地址是http://example.com:8080，前端应用的地址是http://example.com:80。可以在Nginx中配置如下内容：

server {
    listen 80;
    server_name example.com;

    # 配置允许跨域请求
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

    # 配置路由规则，将请求代理到外部的 8080 端口
    location /api/ {
        proxy_pass http://example.com:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 其他配置
    ...
}

以上是通过Nginx代理转发配置实现跨域的攻略及示例说明。希望可以帮助您快速并正确的解决前后端分离中的跨域问题。