0

我有一个具有以下形式的 angular-5 组件：

    <form (ngSubmit)="onSubmit()" #contactForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" placeholder="Your first name" id="name" required
               [(ngModel)]="model.name" name="name" #name="ngModel"/>
        <div [hidden]="name.valid || name.pristine"
             class="alert alert-danger">
          Name is required
        </div>

        <label for="number">Number</label>
        <input type="text" class="form-control" placeholder="Your phone number" id="number"
               [(ngModel)]="model.number" name="number"/>

        <label for="email">Email</label>
        <input type="text" class="form-control" placeholder="Your email address" id="email" required
               [(ngModel)]="model.email" name="email" #email="ngModel"/>
        <div [hidden]="email.valid || email.pristine"
             class="alert alert-danger">
          Email is required
        </div>

        <label for="comment">Comment</label>
        <textarea type="text" class="form-control" placeholder="Your enquiry" id="comment" required
                  [(ngModel)]="model.comment" name="comment" #comment="ngModel"></textarea>
        <div [hidden]="comment.valid || comment.pristine"
             class="alert alert-danger">
          You need to say something
        </div>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>

它周围还有其他东西，但这是本质。

这由打字稿组件处理：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ContactPostService } from "../contact-post.service";
import {Contact} from "../contact";

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit, OnDestroy {

  model: Contact = new Contact();

  submitted = false;

  constructor(private postService: ContactPostService) {}

  onSubmit() {

    console.log('from the form: ' + this.model.name + ', ' + this.model.number + ', ' + this.model.email + ', ' + this.model.comment);

    this.postService.saveContact(this.model)
      .subscribe(data => {
        console.log(data);
      });
    this.submitted = true;
  }

  ngOnInit() { }

  ngOnDestroy() { }

  newContact() {
    this.model = new Contact();
  }

}

然后是实际发布的服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Contact } from './contact';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ContactPostService {

  private API_ENDPOINT = 'https://ovo5xmxf7e.execute-api.ap-southeast-2.amazonaws.com/prod/ContactFormLambda';

  constructor(private http: HttpClient) {}

  saveContact(form: any) {
    console.log('from the form: ' + form.name + ', ' + form.number + ', ' + form.email + ', ' + form.comment)

    let contact: Contact = {
      subject: 'Enquiry from ZenithWebFoundry',
      name: form.name,
      number: form.number,
      email: form.email,
      comment: form.comment
    };

    return this.http.post(this.API_ENDPOINT, contact)
      .pipe(
        catchError((error) => this.handleError(error))
      );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return new ErrorObservable(
      'Something bad happened; please try again later.');
  }
}

基本上，它将四个字段和一个主题值发布到 lambda，我在 AWS 中编写过。我已经从网关测试了 Lambda，我知道它可以工作（我收到了它发送的电子邮件。问题似乎是 Lambda 的 API 网关。一旦启用 CORS，我就会收到以下错误客户端控制台（Chrome 开发者工具）

POST https://ovo5xmxf7e.execute-api.ap-southeast-2.amazonaws.com/prod/ContactFormLambda 500 () /contact:1 无法加载 https://ovo5xmxf7e.execute-api.ap-southeast-2。 amazonaws.com/prod/ContactFormLambda：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://zenithwebfoundry.com ”。响应的 HTTP 状态代码为 500。 main.630e523b47c705dd5494.bundle.js:1 后端返回代码 0，正文为：[object ProgressEvent]

我发现 OPTIONS 工作正常：

要求

URL:https://ovo5xmxf7e.execute-api.ap-southeast-2.amazonaws.com/prod/ContactFormLambda
Request Method:OPTIONS
Status Code:200 
Remote Address:54.230.243.44:443
Referrer Policy:no-referrer-when-downgrade

响应标头

access-control-allow-headers:Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods:DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin:*
content-length:0
content-type:application/json
date:Tue, 06 Feb 2018 10:05:33 GMT
status:200
via:1.1 6884828476070d32978b45d03c1cc437.cloudfront.net (CloudFront)
x-amz-cf-id:DQ4SqBJgRRU9HG4jOLu03Jvg555B9Jv_J3KH9oczNWojhiIN14aCwA==
x-amzn-requestid:450ff8a0-0b25-11e8-850f-b3335987eeef
x-cache:Miss from cloudfront

请注意它是如何返回“access-control-allow-origin:*”标头响应的，所以我认为这之后的 POST 是可以的，但是 POST 失败并出现上述错误

我从这个设置开始，只是为了允许任何来源：

启用 CORS

并收到一条成功消息：

在此处输入图像描述

当我用我的域来源“ http://zenithwebfoundry.com ”更改“*”时，同样的事情发生了

那么如何使用CORS 设置网关，以免 POST 被阻塞？我究竟做错了什么？

4

1 回答 1

1

我对我的问题有一个部分答案，我可以有用地分享。基本上，当您在 API 网关中启用 CORS 时，它会添加标头

access-control-allow-headers:Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
access-control-allow-methods:DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin:*

对您的选项响应。我遇到的问题是网关正在添加标头，但仅适用于 200 OK，如果 Lambda 以 500 响应，则未添加标头，并且 ajax 客户端会抛出错误。

事实证明，当错误被抛出时，阻止电子邮件工作的真正问题是表单提交中存在阻止 lambda 工作、产生 500 并触发 ajax 错误条件的错误。我已经用工作代码更新了这个问题。

现在，我似乎遇到了相反的问题，即使我为我的域启用了 CORS，电子邮件仍然是从非白名单域（在本例中为 localhost）发送的。当然，会引发 ajax 错误，但仍会发送电子邮件。在这种情况下，我会认为网关会阻止命令传递给 lambda。

于 2018-02-10T08:38:37.413 回答