使用Arco-design直传OSS,无法使用通配符(*)的排查过程


在使用Arco-design通过客户端签名直传OSS上传图片,一直报跨域错误

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

OSS跨域配置

具体表现为OSS的跨域配置里必须指定具体的源,不能使用通配符(),通过查询资料、与阿里云工程师沟通大概确定问题点是在使用XMLHttpRequest对象发送一个带有凭证(credentials)的请求,例如cookie或Authorization头。这种情况下,不能使用通配符()作为响应头中的Access-Control-Allow-Origin的值,而必须指定一个具体的域名。否则,浏览器会拒绝访问该资源,以保护您的安全。

不同的HTTP头在跨域请求中对通配符(*)的支持程度不同。以下是一些常见的HTTP头和它们对通配符的支持情况:

  • Access-Control-Allow-Origin:这是一个响应头,它表示允许访问资源的来源。它可以设置为,表示允许任何来源,也可以设置为一个具体的域名,表示只允许该域名。但是,如果请求中携带了凭证(例如cookie或Authorization头),那么不能设置为,而必须指定一个具体的域名。
  • Access-Control-Allow-Methods:这是一个响应头,它表示允许使用的方法(例如GET、POST等)。它可以设置为*,表示允许任何方法,也可以设置为一个或多个具体的方法,用逗号分隔。
  • Access-Control-Allow-Headers:这是一个响应头,它表示允许使用的头部(例如Content-Type、X-Requested-With等)。它可以设置为*,表示允许任何头部,也可以设置为一个或多个具体的头部,用逗号分。
  • Access-Control-Request-Method:这是一个请求头,它表示预检请求中将要使用的方法。它不能设置为*,而必须指定一个具体的方法。
  • Access-Control-Request-Headers:这是一个请求头,它表示预检请求中将要使用的头部。它不能设置为*,而必须指定一个或多个具体的头部,用逗号分隔。

继续排查代码,代码中没有发现设置过withCredentials,同时查看请求头也没有发现有相关数据

GET / HTTP/1.1
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Type: application/json
Host: ******.oss-cn-***.aliyuncs.com
Origin: http://localhost:8002
Pragma: no-cache
Referer: http://localhost:8002/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
sec-ch-ua: "Not/A)Brand";v="99", "Google Chrome";v="115", "Chromium";v="115"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"

排查了很久都没有看到有withCredentials的相关设置,到这里开始有点怀疑自我。尝试全局搜索代码,这是在框架自带的MOCK文件里发现了问题

在Arco-design官方自带的Mock文件夹下user.ts全局配置了

Mock.XHR.prototype.withCredentials = true;

至此终于解决了问题,排查问题耗时虽然有点久,但通过查询资料以及跟阿里云工程师的沟通,对跨域有了更深的了解。如果你也遇到了相同的问题,不妨全局搜索下文件,查查是否是在别的文件中全局配置了withCredentials

声明:初心|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 使用Arco-design直传OSS,无法使用通配符(*)的排查过程


愿你勿忘初心,并从一而终