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

简介: Nginx 解决跨域问题和假请求问题

什么是跨域问题?

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

什么是同源?

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

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

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

Nginx 配置跨域案例,在 nginx.conflocation 中增加如下配置:

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.conflocation 中增加如下配置:

解决假请求问题,如果是简单请求则没有这个问题,但这里是上传文件,首次请求为 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;
            }
        }
    }
}
相关文章
|
30天前
|
前端开发 Java 应用服务中间件
解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
371 0
解决跨域问题的8种方法,含网关、Nginx和SpringBoot~
|
30天前
|
应用服务中间件 nginx
百度搜索:蓝易云【HTTP请求是如何关联Nginx server{}块的?】
总结来说,Nginx中的 `server{}`块用于关联HTTP请求和虚拟主机,通过配置不同的 `server{}`块,可以实现多个域名或IP地址的请求分发和处理。这样,Nginx可以根据不同的请求来提供不同的服务和内容。
42 0
|
30天前
|
前端开发 应用服务中间件 Linux
nginx解决springcloud前后端跨域问题,同时配置ssl
nginx解决springcloud前后端跨域问题,同时配置ssl
|
10天前
|
应用服务中间件 nginx Windows
nginx实现网站url带参跳转 POST请求GET请求跳转
nginx实现网站url带参跳转 POST请求GET请求跳转
|
30天前
|
前端开发 应用服务中间件 nginx
使用nginx-http-concat资源请求合并功能 优化网站响应
使用nginx-http-concat资源请求合并功能 优化网站响应
19 0
|
8月前
|
应用服务中间件 nginx
百度搜索:蓝易云 ,Nginx设置禁用 OPTIONS 请求以及允许跨域教程!
通过按照上述步骤,在Nginx中设置禁用OPTIONS请求和允许跨域。请确保在编辑Nginx配置文件时使用正确的服务器名称或IP地址。
65 0
|
8月前
|
域名解析 负载均衡 应用服务中间件
nginx反向代理https域名时,请求报错502问题排查
nginx反向代理https域名时,请求报错502问题排查
|
9月前
|
应用服务中间件 nginx
nginx输入请求的header和body到日志
nginx输入请求的header和body到日志
372 1
|
30天前
|
监控 安全 前端开发
Nginx 访问日志中有 Get 别的网站的请求是什么原因?
Nginx 访问日志中有 Get 别的网站的请求是什么原因?
48 0
|
30天前
|
网络协议 关系型数据库 MySQL
【nginx】使用nginx转发tcp请求
【nginx】使用nginx转发tcp请求
143 1