您的位置:

Nginx代理跨域

一、Nginx代理跨域配置

在开发中,由于浏览器同源策略的限制,会存在跨域问题。Nginx是一个高性能的Web服务器,它有着强大的代理功能,可以通过Nginx代理跨域来解决这个问题。

下面是配置示例:

location /api/ {
  proxy_pass http://example.com/;
  proxy_set_header Host $host;
  proxy_set_header Origin $host;
  proxy_set_header Referer $host;
}

其中,proxy_pass指定代理的目标地址,而proxy_set_header则设置一些头部信息。Origin和Referer是防止浏览器CSRF攻击的必要头部信息,需要加上。

二、Nginx配置代理解决跨域问题

可以通过修改Nginx配置文件来解决跨域问题。

下面是配置示例:

location / {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
  if ($request_method = 'OPTIONS') {
    return 204;
  }
}

其中,Access-Control-Allow-Origin指定允许跨域的域名,可以使用通配符*表示允许所有域名。Access-Control-Allow-Headers设置允许跨域的头部信息。Access-Control-Allow-Methods指定允许的请求方法。当请求方法为OPTIONS时,直接返回204,表示允许请求。

三、Nginx代理跨域/api

Nginx代理跨域/api通常用于代理RESTful API。

下面是配置示例:

location /api/ {
  proxy_pass http://example.com/;
  proxy_set_header Host $host;
  proxy_set_header Origin $host;
  proxy_set_header Referer $host;
}

四、Nginx代理数据库

在实际开发中,有时需要通过Nginx代理访问数据库。

下面是配置示例:

location / {
  proxy_pass http://localhost:3000/;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';

  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
}

其中,proxy_pass指定代理的目标地址(此处为本地的3000端口)。proxy_http_version指定HTTP协议版本(1.1)。proxy_set_header Upgrade和proxy_set_header Connection是为了支持WebSocket。其他设置与前面相似。

五、Nginx代理跨越

除了代理跨域,Nginx还可以用来代理跨越。

下面是配置示例:

location / {
  if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
  }
  if ($request_method = 'POST') {
    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,Authorization';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  }
  if ($request_method = 'GET') {
    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,Authorization';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
  }
}

此处采用了常用的RESTful风格,并添加了Access-Control-Allow头部信息,允许跨域访问。

六、Nginx代理模式有哪些

Nginx支持多种代理模式,包括反向代理、负载均衡和高可用等。

反向代理:指的是将客户端请求转发到多个服务器上。

负载均衡:指的是将客户端请求平均地分配到多个服务器上,以提高系统吞吐量和性能。

高可用:指的是将多个服务器配置在一起,以保证在某个服务器故障时可以无缝地切换到其它可用的服务器上,以提供可靠的服务。

七、Nginx代理局域网yum

变相实现yum代理缓存。yum在局域网中的使用非常普遍。通过Nginx来代理yum,可以在本地镜像服务器上建立一个yum代理缓存。当客户端需要软件包时,可以从这个本地代理缓存中快速地获取。

下面是配置示例:

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=yum_cache:10m inactive=60m;
server {
  listen 80;
  server_name yum.localdemo.com;
  root /usr/share/nginx/html;
  
  location / {
    index index.html;
  }

  location /repos {
    proxy_pass http://repo.localdemo.com/;
    proxy_set_header Host $host;
    proxy_cache yum_cache;
    proxy_cache_valid 200 15m;
    proxy_cache_valid 404 1m;
    add_header X-Cache-Status $upstream_cache_status;
  }
}

其中,proxy_cache_path用于设置Nginx的缓存路径,方便快速地响应客户端请求。server_name指定本地镜像服务器的地址。location /repos指定缓存的yum软件包所在目录。

八、Nginx代理

Nginx作为高性能的Web服务器,在代理方面有着不可替代的优势。除了上面介绍的代理模式外,还可以通过反向代理来实现访问外部资源。

示例:

upstream backend {
  server 192.168.1.1 weight=10;
  server 192.168.1.2 weight=10;
}

server {
  listen 80;
  server_name frontend.localdemo.com;

  location / {
    root /usr/share/nginx/html/;
    try_files $uri /index.html;
  }

  location /api {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

其中,upstream backend定义了后端服务器的地址和权重。location /api指定了代理的目标地址,并设置了一些头部信息。