使用fetch加载阿里云的在线json 出现403错误

解决阿里云地图JSON接口403错误

在做地图项目的时候,引用了阿里云的在线JSON地图数据。

问题描述:

但是本地开发使用fetch请求json地址的时候接口却出现了403错误,把地址直接复制到浏览器上却能正常打开。

https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json

解决办法:

在html页面头添加:

<meta name="referrer" content="no-referrer">

示例:

重启项目,完美解决。

### 实现阿里云 OSS 签名访问 为了安全地访问存储在阿里云对象存储服务 (OSS) 中的私有资源,通常会采用带有签名的 URL 或者通过 SDK 进行认证请求。对于 JavaScript 应用程序来说,可以利用 `ali-oss` SDK 来简化这一过程。 #### 安装依赖库 首先需要安装官方提供的 Node.js 版本的 Aliyun OSS SDK: ```bash npm install ali-oss --save ``` #### 初始化客户端实例 创建一个新的 OSS 客户端实例时,提供必要的配置参数,比如区域、bucket 名称以及用于生成临时凭证的服务地址等信息。 ```javascript const OSS = require('ali-oss'); let client; try { client = new OSS({ region: 'your-region', // 替换成实际地区代码, e.g., 'oss-cn-hangzhou' accessKeyId: 'your-access-key-id', accessKeySecret: 'your-access-key-secret', stsToken: 'optional-sts-token-if-using-temporary-credentials', bucket: 'your-bucket-name' // 存储空间名称 }); } catch (err) { console.error(err); } ``` #### 获取带签名的对象链接 当用户尝试查看受保护的内容时,可以通过调用特定的方法来获得一个有限时间内有效的预签名 URL。这允许外部应用程序或网页直接加载这些资源而无需暴露长期有效的密钥。 ```javascript async function getSignedUrl(objectName) { try { const result = await client.signatureUrl(objectName); // 对象键值即文件路径 return result.url; // 返回完整的可访问URL字符串 } catch (error) { throw Error(`Failed to generate signed url ${objectName}: ${error.message}`); } } // 调用函数并打印结果 getSignedUrl('example.jpg').then(url => { console.log(`The signed URL is: ${url}`); }); ``` 此方法适用于大多数情况下的简单需求;然而,在某些更复杂的场景中可能还需要考虑其他因素,例如自定义过期时间或者限定 IP 地址范围内的访问控制等功能[^1]。 #### 处理前端上传逻辑 考虑到安全性问题,建议采取间接的方式让客户端先向自己的服务器申请一次性的授权令牌(Policy),之后再凭借该 Policy 和相应的 Signature 将数据发送给 OSS 服务器完成整个上载流程[^2]。 ```javascript function uploadFile(fileInputId){ fetch('/generate-policy') // 向后端请求policy和signature .then(response=>response.json()) .then(data=>{ var formData=new FormData(); Object.keys(data.fields).forEach(key=> formData.append(key,data.fields[key]) ); formData.append('file',document.getElementById(fileInputId).files[0]); fetch(data.url,{ method:'POST', body:formData, }) .then(res=>res.text()) .then(msg=>console.log(msg)); }); } ``` 上述代码片段展示了如何从前端发起 HTTP 请求以获取 policy 及 signature,并将其附加到表单字段中一同提交至指定的目标位置 `/generate-policy` 是指代后端API接口用来生产policy的地方[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值