时间戳

首页 > 解决方案 > 无法获得在 angular/node.js 中工作的发布路线

node.js - 无法获得在 angular/node.js 中工作的发布路线

问题描述

出于某种原因，我无法让我的发布路线在我的应用程序中工作，尽管由于某种原因它在 Postman 中工作得很好。

这是我的节点服务器发布路线：

app.route('/submit-supplies').post((req, res) => {
    res.send(201, req.body);
})

这是我的服务文件：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { environment } from '../../environments/environment'

@Injectable({
  providedIn: 'root',
})
export class SuppliesService {
    public url = environment.url;

    httpOptions = {
        headers: new HttpHeaders({})
    };

    constructor(public http: HttpClient) {}

    onSubmitSupplies(value) {
        console.log(value);
        return this.http.post(this.url + `submit-supplies`, value);
    }

}

这是我调用服务的组件：

 supplyList: FormGroup;

  constructor(private supplyService: SuppliesService) { }

  ngOnInit() {
    this.supplyList = new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required]),
      address1: new FormControl('', [Validators.required]),
      address2: new FormControl('', [Validators.required]),
      zipCode: new FormControl('', [Validators.required]),
      suppliesNeeded: new FormControl('', [Validators.required])
      // content: new FormControl('', [Validators.required])

    });

  }

  onSupplySubmit(){
    return this.supplyService.onSubmitSupplies(this.supplyList.value).subscribe(data => {
      console.log('hello');
    })
  }

所以发送的是表单数据。服务中 onSubmitSupplies() 函数中的 console.log 确实注销了我想要的内容。但它没有到达我的服务器发布路线。

相反，我收到此错误：

从源“ http://localhost:4200 ”访问“ http://localhost:3000/submit-supplies ”处的 XMLHttpRequest已被 CORS 策略阻止：Access-Control-Allow 不允许请求标头字段内容类型- 预检响应中的标头。

谁能帮我吗？

标签： node.jsangular

解决方案

您必须在发布此内容之前在您的节点服务器上添加：

const app = expess();

app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept");
res.setHeader('Access-Control-Allow-Methods',
    'GET, POST, OPTIONS, PUT, PATCH, DELETE');
next();
});

如果您不使用所有这些方法，则将它们从 Access-Control-Allow-Methods 中删除

推荐阅读