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

最新推荐文章于 2024-09-11 10:09:40 发布

小小歪

最新推荐文章于 2024-09-11 10:09:40 发布

阅读量2w

点赞数 4

分类专栏： nginx 文章标签： nginx 跨域

本文链接：https://blog.csdn.net/xiaoxiaowaioye/article/details/87866344

版权

nginx 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述：
公司前端文件部署到阿里云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