原文：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