如何使用角度4对azure函数发出请求？

Question

我使用angular 2代码发送了Azure Https POST请求。

vendordata(){

  let input = {
    VendorName: this.vname,
    Address: this.add,
    store: this.opt
  };

  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  this.http.post('https://dxxxxxxxxxxx', input, {headers: headers })
    .subscribe(data => {
      this.value = data;
      console.log(this.value);

    });

  }

并收到以下错误：

  

错误：预检的响应包含无效的HTTP状态代码400

Answer 1

我用角度4测试了你的代码并且它有效。

import { Component, OnInit } from '@angular/core';
import { Http, Headers } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  constructor(private http: Http) {}

  ngOnInit(): void {

    const functionURI = 'https://<functionname>.azurewebsites.net/api/HttpTriggerJS1?code=<code>';  

    let input = {
      name: "Azure",
    };

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    this.http.post(functionURI, input, { headers: headers } ).subscribe(data => {
      console.log(data);
    });
  }
}

这是我使用Javascript的简单HTTP触发函数：

module.exports = function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.');

    if (req.query.name || (req.body && req.body.name)) {
        context.res = {
            // status: 200, /* Defaults to 200 */
            body: "Hello " + (req.query.name || req.body.name)
        };

    } else {
        context.res = {
            status: 400,
            body: "Please pass a name on the query string or in the request body"
        };
    }
    context.done();
};

CORS设置：

浏览器上的输出：