基于Angular/quickstart上传到Angular 2项目中的AWS S3 bucket

我需要从Angular.io的Angular 2快速入门库上传（他们不使用网页包）

我使用npm安装aws sdk

我在index.html中添加了以下内容：

这是组件中的代码：

@Injectable()
export class S3Service {

private uploadSuccess = true;

private creds = {
    "bucket": "nameOfBucket", 
    "access_key": "accessKey",
    "secret_key": "secretKey",
    "region": "us-east-1"
}

upload(file: File){
    if (file){
        console.log('verified with file');
    }else{
        console.log('without file');
    }
console.log('filetype verified as images/png: ', file.type);

AWS.config.update({
    accessKeyId: this.creds.access_key,  
    secretAccessKey: this.creds.secret_key, 
});
AWS.config.region = this.creds.region;
AWS.config.sslEnabled = false;

console.log('aws.s3 is verified to be a function: ', AWS.S3);
let bucket = new AWS.S3({ params: { Bucket: this.creds.bucket }});

let key = `categories/${file.name}`;
console.log('verified key is : ', key);
let params = {Key: key, Body: file, ContentType: file.type, ServerSideEncryption: 'AES256'};

bucket.putObject(params, function (err: Response | any, data: Response) {
    if (err){
        console.log('there is an error: ', err);
    }
    else{
        console.log('there is no error in s3 upload');
    }
}); 

}

以下是Firefox web控制台中的错误日志：

有一个错误：对象{{uuuu zone\u symbol\uuuu错误：错误，文件名：Getter，行号：Getter，列号：Getter，消息：Getter，堆栈：Getter，originalStack:Getter，zoneAwareStack:Getter，toString:createMethodProperty/props[key].value（），toSource:createMethodProperty/props[key].value（），还有7个…}

这是针对Chrome的：

无法加载XMLHttpRequest。对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“localhost:3000”。响应的HTTP状态代码为400

正如我刚刚学到的，我正在尝试一个允许的CORS：

<CORSConfiguration xmlns="removed this from being displayed">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedOrigin>http://localhost:3000</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

*
http://localhost:3000
邮递
得到
放
3000
x-amz-服务器端加密
x-amz-request-id
x-amz-id-2
*

Angular 1代码成功上载图像

---

请提供帮助和高级感谢。

您在S3存储桶上的CORS配置对于您描述的场景来说很好

我认为问题在于由代码生成的端点URL。我有一个类似的问题，它是混乱的，很难找到

出于某种原因，AWS SDK似乎会根据您用于设置区域信息和/或bucket名称的方法生成不同的端点URL。当生成的URL不包含区域信息（您的URL不包含区域信息）时，会导致飞行前请求失败，从而导致浏览器控制台中出现关于CORS的错误消息（有时可能是飞行前失败的原因）

“问题”端点格式：

http://.s3.amazonaws.com/

“所需”端点格式：

http://s3-.amazonaws.com//

尝试使用我在这里提供的组件来验证您的AWS S3配置、访问和CORS设置。然后，如果您愿意，您可以轻松地将S3特定的内容提取到服务中

以下是步骤：

确认您正在运行AWS SDK的当前版本（自2017-02-08起为2.10.0）。如果您不熟悉如何检查，请打开/node_modules/aws sdk/dist/aws-sdk.js并查看文件顶部的注释以确定版本

将下面的组件添加到项目中。我已经在自己的S3实例上成功地测试了这一点

确保更新配置值，并特别指定S3存储桶所在的区域。如果您不确定，您可以使用AWS控制台找到。当然，您还需要使用凭证和S3 bucket名称替换其他配置值

为AWS SDK库配置systemjs（请参阅下面的system.config.js）

将组件添加到模块的声明中（请参见下面的app.module.ts）

在AppComponent的模板中引用组件（

）（请参见下面的app.component.ts）

s3上传测试组件.ts:

app.module.ts:

app.component.ts:

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类AppComponent{name='Angular'；}

AWS S3铲斗CORS配置：
注意：您可能希望根据您的安全需要，使您的应用程序更具限制性

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1485926968000",
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::<your bucketname>/*"
            ]
        }
    ]
}

*
得到
放
邮递
删除
3000
*

AWS IAM策略（附加到用户或组）：
注意：您几乎肯定希望根据您的安全需要，使允许的操作更具限制性 注意：用适当的值替换

{
“版本”：“2012-10-17”，
“声明”：[
{
“Sid”：“Stmt1485926968000”，
“效果”：“允许”，
“行动”：[
“s3:*”
],
“资源”：[
“arn:aws:s3:：/*”
]
}
]
}

---

如果这不能解决您的问题，请使用Chrome开发工具并查看“网络”选项卡，查看S3API的选项请求，并用完整的响应更新您的问题。当AWS S3预飞行失败时，它们通常会在响应中提供良好的信息。

您在S3存储桶上的CORS配置对于您描述的场景来说很合适

我认为问题在于由代码生成的端点URL。我有一个类似的问题，它是混乱的，很难找到

出于某种原因，AWS SDK似乎会根据您用于设置区域信息和/或bucket名称的方法生成不同的端点URL。当生成的URL不包含区域信息（您的URL不包含区域信息）时，会导致飞行前请求失败，从而导致浏览器控制台中出现关于CORS的错误消息（有时可能是飞行前失败的原因）

“问题”端点格式：

http://.s3.amazonaws.com/

“所需”端点格式：

http://s3-.amazonaws.com//

尝试使用我在这里提供的组件来验证您的AWS S3配置、访问和CORS设置。然后，如果您愿意，您可以轻松地将S3特定的内容提取到服务中

以下是步骤：

确认您正在运行AWS SDK的当前版本（自2017-02-08起为2.10.0）。如果您不熟悉如何检查此项，请打开/node_modules/aws sdk/dist/aws sd

(function (global) {
  System.config({
    ...
    map: {
      ...
      'aws-sdk': 'npm:aws-sdk'
    },
    packages: {
      ...
      'aws-sdk': {
        defaultExtension: 'js',
        main: 'dist/aws-sdk.js',
        format: 'global'
      }
    }
  });
})(this);

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { S3UploadTestComponent } from './s3-upload-test.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [
    AppComponent,
    S3UploadTestComponent,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <s3-upload-test></s3-upload-test>
  `,
})
export class AppComponent  { name = 'Angular'; }

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1485926968000",
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::<your bucketname>/*"
            ]
        }
    ]
}