Question

我有一个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.');
  }
}

基本上，我用AWS写了四个字段和一个主题值到lambda。我已经从网关测试了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，正文是：[对象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失败并带有上面的错误

我开始使用此设置，只是为了允许任何来源：

获得了成功信息：

当我使用我的域名'http://zenithwebfoundry.com'

更改'*'时，发生了同样的事情

那么做如何使用CORS设置网关以便POST不被阻止？我做错了什么？

Answer 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。

AWS API网关启用CORS允许OPTIONS但阻止POST

1 个答案: