gpt4 book ai didi

javascript - HTTP POST 请求从 Angular 前端表达服务器

转载 作者:塔克拉玛干 更新时间:2023-11-01 21:22:17 25 4
gpt4 key购买 nike

我无法对在同一主机上运行但在 Angular 前端的另一个端口上运行的 api 执行 POST 请求这是代码:

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
selector: 'app-addbook',
templateUrl: './addbook.component.html',
styleUrls: ['./addbook.component.scss']
})
export class AddbookComponent implements OnInit {
addForm: FormGroup;
constructor(private formBuilder: FormBuilder, private http:HttpClient) {
}
ngOnInit() {
this.addForm=this.formBuilder.group({
title: ['', Validators.required],
description:['', Validators.required],
genre: ['', Validators.required],
author: ['', Validators.required],
publisher: ['', Validators.required],
pages: ['', Validators.required],
image_url: ['', Validators.required],
buy_url: ['', Validators.required]
});
}
onSubmit(){
if(this.addForm.valid){
console.log(this.addForm.value);
const data = this.addForm.value;
const headers=new HttpHeaders({'Content-Type':'application/json'});
this.http.post("http://localhost:3000/api/books",headers,data).subscribe(
res=>{
console.log(res);
},
err=>{
console.log('err:'+err);
}
);
}
}
}

结果:输出控制台:

Output Console

输出网络:

Output Network

如果您在第二张图片中看到标题已更改为 OPTIONS 而不是帖子

http://localhost:3000/api/books - 发布 api 和 http://localhost:4200 - 前端 Angular

我错过了什么??

最佳答案

如果你看看HttpClient ,它是 post方法的签名为:

post(
url: string,
body: any,
options: {
headers?: HttpHeaders | { [header: string]: string | string[]; };
observe?: HttpObserve;
params... = {}
): Observable<any>

所以这样:

this.http.post("http://localhost:3000/api/books", headers, data)...

应该是:

this.http.post("http://localhost:3000/api/books", data, { headers })...

Payload Data(body) 是 post 方法的第二个参数,然后是 options,其中包含 headers

另外:

查看您的控制台警告,您的 Express Server 似乎由于 CORS 策略而阻止了请求。

您还必须在您的快速服务器上启用 CORS。方法如下

安装 CORS:

npm install cors --save

然后在您的 Express 服务器中:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})

注意:这只是一个示例实现,可能会根据您的实现而改变。

关于javascript - HTTP POST 请求从 Angular 前端表达服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53457933/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com