如何在Angular 2 +中使用HTTP?

时间:2017-12-22 22:50:29

标签: angular http post sendgrid fetch-api

我正在使用Angular(特别是Angular 5)构建应用程序,并希望使用HTTP POST发送带有SendGrid的电子邮件。我使用Postman来验证标头(包括我的API密钥)是否正确。我没有遇到任何问题并收到了几封测试电子邮件。我无法在我的代码中设置此设置,也不知道我是否错过了某个模块来完成这项工作,或者该功能是否存在问题。

以下是代码:

import { Component } from '@angular/core';
......
import { HttpModule, Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'page-invite',
  templateUrl: 'invite.html'
})
export class InvitePage {
  constructor(public navCtrl: NavController, private afAuth: AngularFireAuth, public af: AngularFireDatabase, private http: Http) {
    ......
  }

  emailinvite(){
    var payload = {
      "personalizations": [
        {
          "to": [
            {
              "email": "myemail@gmail.com"
            }
          ],
          "subject": "Hello, World!"
        }
      ],
      "from": {
        "email": "from_address@example.com"
      },
      "content": [
        {
          "type": "text/plain",
          "value": "Hello, World!"
        }
      ]
    };
    var myHeaders = new Headers({
      "Content-Type": "application/json",
      "Authorization": "Bearer MY_API_KEY",
    });
    var data = new FormData();
    data.append( "json", JSON.stringify( payload ) );
    fetch("https://api.sendgrid.com/v3/mail/send",
    {
        method: "POST",
        headers: myHeaders,
        body: data
    })
    .then(function(res){ return res.json(); })
    .then(function(data){ console.log( JSON.stringify( data ) ) })
  }
}

我非常感谢你提供任何帮助。

编辑:我在点击该功能时遇到3个错误:Failed to load resource: Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.Fetch API cannot load https://api.sendgrid.com/v3/mail/send. Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.Error: Uncaught (in promise): TypeError: Type error

0 个答案:

没有答案