javascript - 如何使用 Angular 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);

    });

  }

并出现以下错误:

Error: Response for preflight has invalid HTTP status code 400

Answer 1

我用 Angular 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 设置:

浏览器上的输出: