CORS是什么?其实OSS一直官方文档也没有说清楚。PostObject怎么用官方也一直没有代码示例。
发现有两篇文章解释了下:
一篇是英文的,来自于:
http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/
一篇是中文的,来自于:
利用跨域资源共享(CORS)实现ajax跨域调用
http://blogread.cn/it/article/3542?f=wb
如果用浏览器使用JS进行表单上传(PostObject)的时候会发生什么事情?
主要经历了以下几个步骤:
1. 发OPTIONS请求给OSS,如果这个时候OSS响应403,则上传终止
2. 如果通过了OPTIONS请求,才会进行真正的PostObject
所以本文介绍从创建bucket开始到设置CORS,到通过浏览器以表单的形式直接上传到OSS。
前提条件:
假设你已经有了OSS的ID和KEY,并且本地有一个HTTP Server
第一步:
下载osscmd,需要python的环境,osscmd下载及使用具体见:
http://docs.aliyun.com/?spm=5176.383663.9.4.DrXKYw#/oss/sdk/sdk-download&python
第二步:
创建bucket,假设你已经会使用了osscmd,并且已经使用python osscmd config --host=oss-cn-hangzhou.aliyuncs.com --id=xxx --key=xxx 配置好你的HOST,ID和KEY。这里xxx需要替换成OSS实际的ID和KEY,可以从控制台的右上角的钥匙图标获取。
本文以cors-test bucket为例子,你需要替换成一个不重名的bucket
已经执行config的,请使用 python osscmd cb cors-test 创建bucket
如果没有执行config,请使用python osscmd cb cors-test --host=oss-cn-hangzhou.aliyuncs.com --id=xxx --key=xxx
也可通过官方的控制台创建bucket。
记下创建的bucket和host。
如果是控制台创建,青岛的bucket host为oss-cn-qingdao.aliyuncs.com,杭州的bucket host为oss-cn-hangzhou.aliyuncs.com
第三步:
下载代码,
并将ID,KEY,BUCKET,HOST换成自己实际使用的ID,KEY, BUCKET和HOST使用第二步创建的bucket和使用的host。
放入到HTTP Server的服务目录里,例如我的放在/var/www/html/test/postobject
然后通过浏览器上传http://10.101.166.53/test/post_object_to_oss.html
请注意,
如图所示,在我的代码中我分别将BUCKET,HOST替换成cors-test, 和oss-cn-hangzhou.aliyuncs.com。ID和KEY都替换成自己的。
这个时候如果直接上传会发现失败,查看HTTP头部如图所示,会发现403。这是因为新创建的bucket没有进行任何CORS相关的测试。
使用chrome浏览器自带的开发者工具查看http头的方法
1.在网页任意地方右击
选择审查元素或者按下 shift+ctrl+c, 打开chrome自带的调试工具;
2.
选择network标签,
刷新网页(在打开调试工具的情况下刷新);
3.刷新后在左边找到该网页url,点击 后
右边选择headers,就可以看到当前网页的http头了;
需要注意的是:
浏览器发送了
Request Method:OPTIONS 并且还发送了如下几个Header,
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。