nicenote/docs/fea/Q&A/index.md
2024-01-18 16:29:26 +08:00

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
![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156371487-2e7a495b-c225-4ed4-82a3-ab28f7dfa4e2.png#height=363&id=r7ZCt&margin=%5Bobject%20Object%5D&name=image.png&originHeight=726&originWidth=473&originalType=binary&ratio=1&size=187718&status=done&style=none&width=236.5)
### 设置跨域规则
![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156400297-4528de9b-e249-4f15-bdd1-9ae07bf8c2df.png#height=329&id=Kws6W&margin=%5Bobject%20Object%5D&name=image.png&originHeight=657&originWidth=629&originalType=binary&ratio=1&size=62533&status=done&style=none&width=314.5)
### 创建 RAM 用户
> 这一步的作用是分担风险,不要直接用主账号去登录
并给该用户分配调用 STS 服务 AssumeRole 接口的权限,这样待会儿后端就能以该用户的身份给前端分配 STS 凭证了:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156480237-912d579e-2e46-4738-996c-991810b0121a.png#height=280&id=GWXB4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=560&originWidth=1456&originalType=binary&ratio=1&size=275868&status=done&style=none&width=728)
### 创建用户角色
该角色即有权限在前端调用 aliyun-oss SDK 上传文件的用户角色,例如我们创建一个只有上传权限的角色,命名为 uploader
![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156569197-374d1b4d-87ef-4b83-b888-43e585823b57.png#height=314&id=yH483&margin=%5Bobject%20Object%5D&name=image.png&originHeight=628&originWidth=1396&originalType=binary&ratio=1&size=365279&status=done&style=none&width=698)
接下来我们需要给该角色分配权限,可以通过创建一条权限策略并分配给角色,该权限策略里面只包含了上传文件、分片上传相关的权限:
![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156596778-1a1bd9f9-675d-4de8-ae9a-fe119187a138.png#height=370&id=M1KQd&margin=%5Bobject%20Object%5D&name=image.png&originHeight=740&originWidth=1382&originalType=binary&ratio=1&size=307620&status=done&style=none&width=691)
```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 角色
![image.png](https://cdn.nlark.com/yuque/0/2021/png/195884/1614156673094-a4029f4e-63c9-4396-b3bc-d632f4056c7a.png#height=445&id=JrO2L&margin=%5Bobject%20Object%5D&name=image.png&originHeight=890&originWidth=1390&originalType=binary&ratio=1&size=295135&status=done&style=none&width=695)
### 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 策略内容对不对