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

原文：https://blog.csdn.net/xiaoxiaowaioye/article/details/87866344

问题描述：
公司前端文件部署到阿里云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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
加入如下内容：

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,*';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
还有是有问题！！！！
提示：
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,*';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
顺便提一下，常规的GET，POST，PUT，DELETE请求是简单请求（相对于OPTIONS请求），但是OPTIONS有点儿特别，它要先发送检查请求服务器（你要不要我连接呀？要的话我就来咯！！），而oss就是如此，首先会发送options请求，所以nginx配置里单独要做options请求的处理！！

这里有详细的介绍 https://help.aliyun.com/document_detail/89765.html?spm=5176.11065259.1996646101.searchclickresult.4d203666XgNtjf
————————————————
版权声明：本文为CSDN博主「小小歪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaoxiaowaioye/java/article/details/87866344