108 lines
4.0 KiB
Markdown
108 lines
4.0 KiB
Markdown
---
|
|
nav:
|
|
title: 前端
|
|
path: /fea
|
|
group:
|
|
title: Q&A
|
|
order: 100
|
|
---
|
|
|
|
# Q&A
|
|
|
|
## 页面弹框之后请求一直失败?
|
|
|
|
可能是因为手机插件类似 ADB 将弹框事件拦截了,关闭或加入白名单就好了
|
|
|
|
## 通过浏览器打开 https 后,无法再次打开 http 链接?
|
|
|
|
请将下面这串代码删除,删干净一点:
|
|
|
|
```javascript
|
|
<meta http-equiv ="Content-Security-Policy" content="upgrade-insecure-requests">
|
|
```
|
|
|
|
## 阿里云 oss 上传
|
|
|
|
### 创建 bucket
|
|
|
|

|
|
|
|
### 设置跨域规则
|
|
|
|

|
|
|
|
### 创建 RAM 用户
|
|
|
|
> 这一步的作用是分担风险,不要直接用主账号去登录
|
|
|
|
并给该用户分配调用 STS 服务 AssumeRole 接口的权限,这样待会儿后端就能以该用户的身份给前端分配 STS 凭证了:
|
|

|
|
|
|
### 创建用户角色
|
|
|
|
该角色即有权限在前端调用 aliyun-oss SDK 上传文件的用户角色,例如我们创建一个只有上传权限的角色,命名为 uploader
|
|

|
|
接下来我们需要给该角色分配权限,可以通过创建一条权限策略并分配给角色,该权限策略里面只包含了上传文件、分片上传相关的权限:
|
|

|
|
|
|
```javascript
|
|
// 策略内容
|
|
{
|
|
"Version": "1",
|
|
"Statement": [
|
|
{
|
|
"Effect": "Allow",
|
|
"Action": [
|
|
"oss:PutObject",
|
|
"oss:InitiateMultipartUpload",
|
|
"oss:UploadPart",
|
|
"oss:UploadPartCopy",
|
|
"oss:CompleteMultipartUpload",
|
|
"oss:AbortMultipartUpload",
|
|
"oss:ListMultipartUploads",
|
|
"oss:ListParts"
|
|
],
|
|
"Resource": [
|
|
"acs:oss:*:*:${bucket}",
|
|
"acs:oss:*:*:${bucket}/*"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
然后,把该策略赋予 uploader 角色
|
|

|
|
|
|
### node 代码实现
|
|
|
|
```javascript
|
|
const OSS = require('ali-oss');
|
|
const STS = OSS.STS;
|
|
|
|
const sts = new STS({
|
|
accessKeyId: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY,
|
|
accessKeySecret: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY_SECRET,
|
|
});
|
|
|
|
async function getCredential(req, res, next) {
|
|
try {
|
|
const { credentials } = await sts.assumeRole(
|
|
'acs:ram::1582938330607257:role/uploader', // role arn
|
|
null, // policy
|
|
15 * 60, // expiration
|
|
'web-client', // session name
|
|
);
|
|
req.result = credentials;
|
|
next();
|
|
} catch (err) {
|
|
next(err);
|
|
}
|
|
}
|
|
```
|
|
|
|
### OSS 报错大全
|
|
|
|
1. AccessDeniedError: You have no right to access this object because of bucket acl
|
|
> 看下配置的 bucket 策略内容对不对
|