Nginx 解决跨域问题和假请求问题

本是古典何须时尚 2023-09-29 09:34 8阅读 0赞

### 什么是跨域问题？ ###

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。

### 什么是同源？ ###

所谓同源是指，域名，协议，端口均相同

### 使用 Nginx 反向代理解决跨域问题 ###

以上跨域问题解决方案都需要服务器支持，当服务器无法设置 `header` 或提供 `callback` 时我们就可以采用 Nginx 反向代理的方式解决跨域问题。

Nginx 配置跨域案例，在 `nginx.conf` 的 `location` 中增加如下配置：

add_header Access-Control-Allow-Origin  *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;

Nginx 配置假请求问题，在 `nginx.conf` 的 `location` 中增加如下配置：

解决假请求问题，如果是简单请求则没有这个问题，但这里是上传文件，首次请求为 OPTIONS 方式，实际请求为 POST 方式

add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range;

如：

user  nginx;
    worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    
        keepalive_timeout  65;
    
        server {
            listen 80;
            server_name upload.myshop.com;
            add_header 'Access-Control-Allow-Origin'  *;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            location / {
                proxy_pass  http://192.168.50.135:8888;
                if ($request_method = 'OPTIONS') {
                    add_header Access-Control-Allow-Origin  *;
                    add_header Access-Control-Allow-Headers X-Requested-With;
                    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
                    # 解决假请求问题，如果是简单请求则没有这个问题，但这里是上传文件，首次请求为 OPTIONS 方式，实际请求为 POST 方式
                    # Provisional headers are shown.
                    # Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.
                    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range;
                    return 200;
                }
            }
        }
    }