Nginx解决跨域资源问题:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在项目需求开发的过程中经常会碰到跨域的问题,一般都是在nginx添加配置来解决,其他的web服务器也类似,但是有一种特殊情况,接口跨域POST JSON的时候比较特别,如果只配置下面的规则,还是会存在问题。

        #   指定允许跨域的方法,*代表所有
        add_header Access-Control-Allow-Methods *;

        #   预检命令的缓存,如果不缓存每次会发送两次请求
        add_header Access-Control-Max-Age 3600;
        #   带cookie请求需要加上这个字段,并设置为true
        add_header Access-Control-Allow-Credentials true;

发送POST请求如果存在Body参数,会发送两次请求,所以需要向下面这样配置

 location ~ ^/test/ {
             #   OPTIONS预检命令,预检命令通过时才发送请求
             #   检查请求的类型是不是预检命令
            if ($request_method = 'OPTIONS') {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Content-Type *;
                add_header Access-Control-Allow-Credentials 'true';
                add_header Access-Control-Allow-Headers *;
                return 204;
            }
            rewrite ^/test/(.*) /$1 break;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Content-Type *;
            add_header Access-Control-Allow-Credentials 'true';
            add_header Access-Control-Allow-Headers *;

            access_log /var/log/nginx/test.access.log;
            proxy_set_header X-Forward-For $remote_addr;
            proxy_set_header X-real-ip $remote_addr;
            proxy_read_timeout 300s;
            client_max_body_size 2g;
            proxy_pass http://xxxx:8080;
        }

简单请求和非简单请求是浏览器发出跨域请求的 两种不同的请求方式,我们来了解一下。

简单请求

发送的请求符合下面的所有情况,就属于简单请求。

  • 请求方法为其中一种:GET、POST、HEAD;
  • 除了浏览器自动设置的字段(比如 Connection),仅能人为设置请求头字段 Accept、Accept-Language、Content-Language、Content-Type 这个集合内的值。
  • 请求头字段 Content-Type 为其中一种:text/plain、 multipart/form-data、application/x-www-form-urlencoded;

复杂请求

不符合简单请求规定条件的请求,就是 非简单请求。

对于简单请求,为了兼容,浏览器会直接将请求发出去。但非简单请求没有兼容的需要,所以浏览器给它加上了严格的复杂机制。

在发出真正的请求前,浏览器会先发一个 OPTION 请求来探探路,这个请求称为 预检请求(preflight)。

 预请求以OPTIONS形式发送,当中同样包含域,并且还包含了两项CORS特有的内容

  • Access-Control-Request-Method – 该项内容是实际请求的种类,可以是GET、POST之类的简单请求,也可以是PUT、DELETE等等。
  • Access-Control-Request-Headers – 该项是一个以逗号分隔的列表,当中是- 复杂请求所使用的头部。
如何配置nginx以返回文本或json
HTML5 Video // Completely Hide Controls
标签:

发表我的评论

电子邮件地址不会被公开。 必填项已用*标注

ajax-loader