Nginx配置跨域请求

一、从nginx配置跨域请求别人的服务接口

1、如果前端应用向其他网站的API发送请求，则需要使用nginx作为反向代理服务器。首先需要在服务器上安装nginx，并在nginx.conf文件中添加以下内容：

location /api/ {
    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';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    proxy_pass http://example.com/;
}

其中，/api/是本地服务器上的路径，http：//example.com/是远程服务器上的路径，这里需要修改成实际的API路径。

2、以上配置中的add_header将响应头中的Access-Control-Allow-Origin属性设置为任意域名，Access-Control-Allow-Methods属性设置为GET、POST和OPTIONS方法，Access-Control-Allow-Headers属性设置为允许的请求头。如果请求方法为OPTIONS，则将响应状态码设置为204，表示已经接受请求。

3、在修改了nginx.conf之后，需要重新启动nginx。

二、nginx设置跨域请求

1、如果前端应用向本地服务器发送请求，则需要将allow-origin设置为本地IP地址或域名，可以在nginx.conf文件中添加以下内容：

server {
     listen       80;
     server_name  localhost;
     location / {
         add_header 'Access-Control-Allow-Origin' 'http://127.0.0.1:8080'; # 允许所有的请求都会处理允许跨域 
         add_header 'Access-Control-Allow-Credentials' 'true';
         root   html;
         index  index.html;
     }
}

2、以上配置中的allow-origin将请求头中的Access-Control-Allow-Origin属性设置为本地IP地址或域名，并且设置Access-Control-Allow-Credentials为true，表示允许发送cookie。这里设置为http://127.0.0.1:8080，需要修改成实际使用的地址和端口号。

3、在修改了nginx.conf之后，需要重新启动nginx。

三、nginx怎么配置域名

1、首先需要将域名指向服务器IP地址。

2、在nginx.conf文件中添加以下内容：

server {
     listen       80;
     server_name  example.com;
     location / {
         add_header 'Access-Control-Allow-Origin' 'http://example.com'; # 允许所有的请求都会处理允许跨域 
         add_header 'Access-Control-Allow-Credentials' 'true';
         root   html;
         index  index.html;
     }
}

3、以上配置中的server_name将请求头中的Access-Control-Allow-Origin属性设置为域名，并且设置Access-Control-Allow-Credentials为true，表示允许发送cookie。这里设置为example.com，需要修改成实际使用的域名。

4、在修改了nginx.conf之后，需要重新启动nginx。

四、正确的nginx跨域配置

1、正确的nginx跨域配置需要在请求头中添加Access-Control-Allow-Origin、Access-Control-Allow-Credentials等属性，这需要在nginx.conf文件中添加以下内容：

server {
     listen       80;
     server_name  example.com;
     location / {
         add_header 'Access-Control-Allow-Origin' 'http://example.com'; # 允许所有的请求都会处理允许跨域 
         add_header 'Access-Control-Allow-Credentials' 'true';
         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';
         add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
         root   html;
         index  index.html;
     }
}

2、以上配置中的add_header将响应头中的Access-Control-Allow-Origin属性设置为域名，Access-Control-Allow-Credentials属性设置为true，Access-Control-Allow-Methods属性设置为GET、POST和OPTIONS方法，Access-Control-Allow-Headers属性设置为允许的请求头，Access-Control-Expose-Headers属性设置为响应头中允许被访问的属性。

3、在修改了nginx.conf之后，需要重新启动nginx。

五、前后端分离nginx配置详解

1、前后端分离的情况下需要配置nginx将所有静态资源、API请求等转发至后端服务器，可以在nginx.conf文件中添加以下内容：

server {
    listen       80;
    server_name  example.com;

    location /api {
        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_pass http://127.0.0.1:8000; 
    }

    location / {
        root   /home/user/example.com/build;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

2、以上配置中的location /api将请求转发至API服务器，proxy_set_header设置请求头，proxy_pass设置API服务器地址。location /将静态资源转发至/build文件夹下，如果找不到对应的文件则转发至index.html。

3、在修改了nginx.conf之后，需要重新启动nginx。

六、nginx跨域怎么配置

1、nginx跨域配置需要在nginx.conf文件中添加以下内容：

server {
    listen      80;
    server_name example.com;

    location / {
        add_header  'Access-Control-Allow-Origin' '*';
        add_header  'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
     }
}

2、以上配置中的add_header将响应头中的Access-Control-Allow-Origin属性设置为任意域名，Access-Control-Allow-Methods属性设置为GET、POST、DELETE、PUT和OPTIONS方法，Access-Control-Allow-Headers属性设置为允许的请求头，if语句用于处理预检请求。

3、在修改了nginx.conf之后，需要重新启动nginx。

七、nginx配置请求过滤

1、nginx可以过滤恶意请求，可以在nginx.conf文件中添加以下内容：

http {
    limit_req_zone $binary_remote_addr zone=black:10m rate=20r/m;

    server {
        listen 80;
        server_name example.com;

        location / {
            limit_req zone=black burst=5;
            proxy_pass http://upstream;
        }
    }
}

2、以上配置中的limit_req_zone指定限制访问区域，$binary_remote_addr表示IP地址，zone=black表示黒名单，10m表示内存大小，rate=20r/m表示每分钟限制20个请求。location /中的limit_req限制请求速率，burst定义在触发限制前允许的突发数量，proxy_pass代表转发至后端应用。

3、在修改了nginx.conf之后，需要重新启动nginx。

八、nginx跨域配置详解

1、通过以上几种方法，nginx可以进行跨域配置。这些方法包括将请求转发至其他服务器、设置请求头中的Access-Control-Allow-Origin等属性、设置允许的请求头、过滤恶意请求等。根据具体的应用场景，选择相应的方法进行配置。

2、在修改了nginx.conf之后，需要重新启动nginx。