uni-app 阿里云储存设置跨域后仍然报跨域错误

uni-app 阿里云储存设置跨域后仍然报跨域错误

产品分类：uniCloud/App

App下载地址或H5网址： www.kltree.com

操作步骤：

  • 在开发者云空间设置了自己的域名和允许跨域名单

预期结果：

  • js中可以访问图片

实际结果：

  • 报跨域错误

bug描述：

我已在开发者云空间设置了自己的域名和允许跨域名单，但是阿里云储存的跨域却无效。我js中访问阿里云储存中的图片时一直报跨域错误。

Image 1 Image 2


更多关于uni-app 阿里云储存设置跨域后仍然报跨域错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

遇到同样问题，搞了一天，也没找到问题所在

更多关于uni-app 阿里云储存设置跨域后仍然报跨域错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在HBuilder WEB浏览器 测试的时候没有问题，上传到前端网页托管，用域名打开就不行了，同样也配置了跨域域名


https://static-mp-6e58f209-b304-407b-9366-5223e29dfc81.next.bspapp.com/ 试了没问题啊 访问的路径跟你配的，咋感觉不一样呢

阿里那个跨域一直解决不了，我换成七牛的了，所以访问的路径不一样

在使用 uni-app 开发时，如果你已经为阿里云 OSS（对象存储服务）设置了跨域规则，但仍然遇到跨域错误，可能是由于以下几个原因导致的。以下是一些排查和解决问题的步骤：

1. 确认跨域规则设置正确

确保你在阿里云 OSS 控制台中正确设置了跨域规则。跨域规则需要包含以下内容：

  • Allowed Origins: 允许访问的域名，例如 https://yourdomain.com 或 *（允许所有域名）。
  • Allowed Methods: 允许的 HTTP 方法，例如 GET, POST, PUT, DELETE 等。
  • Allowed Headers: 允许的请求头，例如 *（允许所有请求头）。
  • Expose Headers: 允许暴露给客户端的响应头，例如 ETag。
  • Max Age: 预检请求的缓存时间，例如 3600 秒。

2. 检查请求的域名和协议

确保你在 uni-app 中请求的 OSS 资源 URL 的域名和协议与跨域规则中设置的 Allowed Origins 一致。例如，如果你在跨域规则中设置了 https://yourdomain.com，那么请求的 URL 也必须是 https://yourdomain.com，而不能是 http://yourdomain.com 或其他域名。

3. 检查请求的 HTTP 方法

确保你在 uni-app 中使用的 HTTP 方法与跨域规则中设置的 Allowed Methods 一致。例如，如果你在跨域规则中只允许 GET 方法，那么你不能使用 POST 或 PUT 方法。

4. 检查请求头

确保你在 uni-app 中发送的请求头与跨域规则中设置的 Allowed Headers 一致。如果你在跨域规则中设置了特定的请求头，那么你需要在 uni-app 中发送相同的请求头。

5. 检查预检请求（OPTIONS）

跨域请求通常会先发送一个 OPTIONS 预检请求，以检查服务器是否允许跨域请求。确保你的服务器正确处理了 OPTIONS 请求，并返回了正确的响应头。

6. 检查浏览器缓存

有时浏览器会缓存跨域请求的结果，导致即使你更新了跨域规则，浏览器仍然使用旧的缓存结果。你可以尝试清除浏览器缓存，或者使用无痕模式进行测试。

7. 使用代理服务器

如果你无法解决跨域问题，可以考虑在 uni-app 中使用代理服务器来转发请求。通过代理服务器，你可以将请求发送到同域名下的服务器，然后由服务器转发到阿里云 OSS，从而避免跨域问题。

8. 检查阿里云 OSS 的 CORS 配置

确保阿里云 OSS 的 CORS 配置已经生效。有时配置可能需要一些时间才能生效，或者你可能需要重新保存配置。

9. 使用阿里云 OSS SDK

如果你使用的是阿里云 OSS SDK，确保你使用的是最新版本，并且正确配置了 SDK 的参数。

10. 查看浏览器控制台错误信息

在浏览器的开发者工具中查看控制台错误信息，通常会提供更详细的跨域错误信息，帮助你进一步排查问题。

示例代码

以下是一个在 uni-app 中使用阿里云 OSS 的示例代码：

uni.uploadFile({
  url: 'https://your-bucket.oss-cn-hangzhou.aliyuncs.com/your-object-key',
  filePath: filePath,
  name: 'file',
  formData: {
    key: 'your-object-key',
    policy: 'your-policy',
    OSSAccessKeyId: 'your-access-key-id',
    signature: 'your-signature',
    success_action_status: '200',
  },
  success: (res) => {
    console.log('Upload success:', res);
  },
  fail: (err) => {
    console.error('Upload failed:', err);
  }
});
回到顶部