记一次阿里云oss前端跨域问题的解决方法!

问题描述:
公司前端文件部署到阿里云oss,后端web是nginx,出现跨域,提示如下

Access to fetch at Access to fetch at ‘https://xxx.xxxx.cn/gpas/register/partner/oNIciweVvYNrVBF3vE6IVmamAkpg?sourceType=public’ from origin ‘https://ossh5.palmte.cn’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
记一次阿里云oss前端跨域问题的解决方法!_第1张图片
nginx配置如下:

         location  / {
            proxy_buffer_size 128k;
            proxy_buffers  32 32k;
            proxy_busy_buffers_size 128k;
            add_header X_Static transfer;
            #proxy_redirect    http:// $scheme://;  ##把后端返回协议修改为当前所用协议
            proxy_set_header Host  $host; ##设置header头为主域名加端口转发给后端服务器
            proxy_set_header X-Forwarded-For  $remote_addr; ##请求由谁发起---客户端真实IP
            #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";
            if ( $request_method = 'OPTIONS' ) {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'POST,GET,PUT,OPTIONS,DELETE';
                add_header Access-Control-Max-Age 3600;
                add_header Access-Control-Allow-Headers 'Origin,X-Requested-With,Content-Type,Accept,Authorization,sourcetype,token';
                add_header Access-Control-Allow-Credentials true;
                add_header Content-Length 0;
                add_header Content-Type text/plain;
                return 200;
                }
                add_header Access-Control-Allow-Origin *;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
                proxy_pass   http://127.0.0.1:8080;
        }

加入如下内容:

if ( $request_method = 'OPTIONS' ) {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'POST,GET,PUT,OPTIONS,DELETE';
                add_header Access-Control-Max-Age 3600;
                add_header Access-Control-Allow-Headers 'Origin,X-Requested-With,Content-Type,Accept,Authorization';
                add_header Access-Control-Allow-Credentials true;
                add_header Content-Length 0;
                add_header Content-Type text/plain;
                return 200;
                }
                add_header Access-Control-Allow-Origin *;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';

还有是有问题!!!!
提示:
Access to fetch at ’ https://xxx.xxx.com’ has been blocked by CORS policy: Request header field sourcetype is not allowed by Access-Control-Allow-Headers in preflight response.

Access to fetch at ‘https://xxx.xxxx.com’ from origin ‘https://ossh5.palmte.cn’ has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

发现阿里云oss请求header有 sourcetype,token!!!!
记一次阿里云oss前端跨域问题的解决方法!_第2张图片
解决办法:

add_header Access-Control-Allow-Headers ‘Origin,X-Requested-With,Content-Type,Accept,Authorization,sourcetype,token’; 加入sourcetype,token即可。

if ( $request_method = 'OPTIONS' ) {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'POST,GET,PUT,OPTIONS,DELETE';
                add_header Access-Control-Max-Age 3600;
                add_header Access-Control-Allow-Headers 'Origin,X-Requested-With,Content-Type,Accept,Authorization,sourcetype,token';
                add_header Access-Control-Allow-Credentials true;
                add_header Content-Length 0;
                add_header Content-Type text/plain;
                return 200;
                }
                add_header Access-Control-Allow-Origin *;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';

顺便提一下,常规的GET,POST,PUT,DELETE请求是简单请求(相对于OPTIONS请求),但是OPTIONS有点儿特别,它要先发送检查请求服务器(你要不要我连接呀?要的话我就来咯!!),而oss就是如此,首先会发送options请求,所以nginx配置里单独要做options请求的处理!!

这里有详细的介绍 https://help.aliyun.com/document_detail/89765.html?spm=5176.11065259.1996646101.searchclickresult.4d203666XgNtjf

你可能感兴趣的:(nginx)