oss报错跨域问题No 'Access-Control-Allow-Origin' 的解决方法

2023-03-03 07:43:59

跨域访问阿里OSS的终极解决方案：告别“No 'Access-Control-Allow-Origin'”错误

跨域访问是前端开发中常见的难题，当你在使用阿里OSS进行前端直传时，也可能会遇到跨域报错的困扰。别担心，本文将为你详细介绍如何轻松解决“No 'Access-Control-Allow-Origin'”错误，助你跨域无忧！

什么是跨域访问？

跨域访问是指从一个源（例如你的网站）向另一个源（例如阿里OSS）发送请求。浏览器出于安全考虑，会限制跨域访问，以防止恶意攻击。

“No 'Access-Control-Allow-Origin'”错误的含义

当你在前端直传阿里OSS时，如果请求的资源没有设置 Access-Control-Allow-Origin 头信息，浏览器就会抛出“No 'Access-Control-Allow-Origin'”错误。这表示浏览器不允许你的网站访问阿里OSS上的资源。

解决方法：添加跨域规则

解决跨域问题的关键在于添加跨域规则。只需几个简单的步骤，即可轻松搞定：

登录阿里云OSS管理控制台： 选择要设置跨域规则的存储桶。
配置跨域规则： 点击“权限和策略”选项卡，选择“跨域资源共享 (CORS)”，然后点击“添加规则”按钮。
填写规则信息：
- 允许的源： 允许访问存储桶的网站URL（例如 http://localhost:3000）。
- 允许的请求头： 允许跨域请求的头信息（例如 Content-Type）。
- 允许的方法： 允许跨域请求的方法（例如 GET、PUT、POST）。
- 允许的标头： 允许跨域请求的标头信息（例如 Authorization）。
保存规则： 点击“确定”按钮保存规则。

代码示例

以下代码示例演示了如何使用 JavaScript 添加跨域规则：

const bucketName = 'my-bucket';
const region = 'us-east-1';
const accessKeyId = 'YOUR_ACCESS_KEY_ID';
const accessKeySecret = 'YOUR_ACCESS_KEY_SECRET';

const client = new OSS({
  region,
  accessKeyId,
  accessKeySecret,
});

const corsRule = {
  allowedOrigins: ['http://localhost:3000'],
  allowedMethods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  maxAgeSeconds: 3600,
};

client.putBucketCors(bucketName, [corsRule], (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log('CORS rule added successfully.');
  }
});