Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
张重言
rails
提交
6150eb04
R
rails
项目概览
张重言
/
rails
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
R
rails
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
6150eb04
编写于
10月 08, 2019
作者:
G
George Claghorn
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Document CORS configuration for direct uploads [ci skip]
上级
f4a04c3c
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
68 addition
and
2 deletion
+68
-2
guides/source/active_storage_overview.md
guides/source/active_storage_overview.md
+68
-2
未找到文件。
guides/source/active_storage_overview.md
浏览文件 @
6150eb04
...
...
@@ -477,7 +477,7 @@ Direct Uploads
Active Storage, with its included JavaScript library, supports uploading
directly from the client to the cloud.
###
Direct upload installation
###
Usage
1.
Include
`activestorage.js`
in your application's JavaScript bundle.
...
...
@@ -499,7 +499,73 @@ directly from the client to the cloud.
```erb
<%= form.file_field :attachments, multiple: true, direct_upload: true %>
```
3.
That's it! Uploads begin upon form submission.
3.
Configure CORS on third-party storage services to allow direct upload requests.
4.
That's it! Uploads begin upon form submission.
### Cross-Origin Resource Sharing (CORS) configuration
To make direct uploads to a third-party service work, you’ll need to configure the service to allow cross-origin requests from your app. Consult the CORS documentation for your service:
*
[
S3
](
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
)
*
[
Google Cloud Storage
](
https://cloud.google.com/storage/docs/configuring-cors
)
*
[
Azure Storage
](
https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services
)
Take care to allow:
*
All origins from which your app is accessed
*
The
`PUT`
request method
*
The following headers:
*
`Origin`
*
`Content-Type`
*
`Content-MD5`
*
`Content-Disposition`
(except for Azure Storage)
*
`x-ms-blob-content-disposition`
(for Azure Storage only)
*
`x-ms-blob-type`
(for Azure Storage only)
#### Example: S3 CORS configuration
```
xml
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration
xmlns=
"http://s3.amazonaws.com/doc/2006-03-01/"
>
<CORSRule>
<AllowedOrigin>
https://www.example.com
</AllowedOrigin>
<AllowedMethod>
PUT
</AllowedMethod>
<AllowedHeader>
Origin
</AllowedHeader>
<AllowedHeader>
Content-Type
</AllowedHeader>
<AllowedHeader>
Content-MD5
</AllowedHeader>
<AllowedHeader>
Content-Disposition
</AllowedHeader>
<MaxAgeSeconds>
3600
</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>
```
#### Example: Google Cloud Storage CORS configuration
```
json
[
{
"origin"
:
[
"https://www.example.com"
],
"method"
:
[
"PUT"
],
"responseHeader"
:
[
"Origin"
,
"Content-Type"
,
"Content-MD5"
,
"Content-Disposition"
],
"maxAgeSeconds"
:
3600
}
]
```
#### Example: Azure Storage CORS configuration
```
xml
<Cors>
<CorsRule>
<AllowedOrigins>
https://www.example.com
</AllowedOrigins>
<AllowedMethods>
PUT
</AllowedMethods>
<AllowedHeaders>
Origin, Content-Type, Content-MD5, x-ms-blob-content-disposition, x-ms-blob-type
</AllowedHeaders>
<MaxAgeInSeconds>
3600
</MaxAgeInSeconds>
</CorsRule>
<Cors>
```
### Direct upload JavaScript events
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录