oss怎么解决前端js上传文件跨域问题_记一次阿里云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