记一次阿里云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.
在这里插入图片描述
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!!!!
在这里插入图片描述
解决办法:

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

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值