如何解决阿里云 OSS 图片跨域问题

什么是跨域问题

这个问题可以参考我之前的文章，这里就不再赘述，点击阅读。

阿里云 OSS 图片跨域问题解决方案

Bucket 级别设置跨域资源共享，可以参考官方文档：https://help.aliyun.com/zh/oss/user-guide/cors-12/。我个人的建议尽量使用 bucket 级别的设置，部分图片确有特殊要求才需要单独设置。

我这里主要分享如何针对单张图片设置 cors 共享，借助阿里云的 JAVA SDK，实现方法如下：

ObjectMetadata meta = new ObjectMetadata();
meta.setHeader("Access-Control-Allow-Origin", "*");
meta.setHeader("Access-Control-Allow-Methods", "*");
meta.setHeader("Access-Control-Allow-Headers", "*");
// in 是待上传图片的输入流
// ossClient 的创建可以参考阿里云的 OSS SDK 文档
ossClient.putObject(ossProperties.getBucket(), objectName, in, meta);

要点是 putObject 的时候指定 ObjectMetadata，通过 meta 设置跨域规则。

特别提醒

如果你需要针对特性的域名来设置跨域规则，那么还需要指定 vary 响应头。关于这点可以参考 MDN。

比如只允许 a.com 这个域名，那么可以这样设置：

ObjectMetadata meta = new ObjectMetadata();
meta.setHeader("Access-Control-Allow-Origin", "https://a.com");
meta.setHeader("Access-Control-Allow-Methods", "*");
meta.setHeader("Access-Control-Allow-Headers", "*");
meta.setHeader("Vary", "Origin");