Nano Hash - криптовалюты, майнинг, программирование

HTTP POST-запрос для экспресс-сервера из внешнего интерфейса angular

Я не мог выполнить запрос POST к API, работающему на том же хосте, но на другом порту из внешнего интерфейса angular. Вот код:

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);
        }
      );
    }
  }
}

Результат: Консоль вывода:

Консоль вывода

Выходная сеть:

Выходная сеть

если вы видите на втором изображении, заголовок был изменен на OPTIONS вместо сообщения

http://localhost:3000/api/books — отправка API и http://localhost:4200 — угловой внешний интерфейс

что мне не хватает??

http node.js javascript angular mean-stack
24.11.2018

  • Последовательность полезной нагрузки data и headers в вашем случае перевернута. Посмотрите мой ответ, чтобы узнать больше. 24.11.2018
  • Вы читали сообщения в консоли? Вам нужно ознакомиться с CORS и соответствующим образом обновить серверную часть (или добавить прокси-сервер, в зависимости от того, что ближе к вашей фактической конфигурации развертывания). 24.11.2018
  • Кажется, вам нужно включить CORS на вашем Express Server. Я добавил обновленный ответ. Пожалуйста, проверьте, помогает ли это. 24.11.2018
  • @jonrsharpe, я буду иметь это в виду. Спасибо :) 24.11.2018

Ответы:


1

Если вы посмотрите на 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 })...

Данные полезной нагрузки (body) являются вторым аргументом метода post, а затем идет options, который содержит такие вещи, как headers.

ТАКЖЕ:

Глядя на предупреждения вашей консоли, похоже, что ваш Express Server блокирует запросы из-за политики CORS.

Вам также необходимо включить CORS на вашем экспресс-сервере. Вот как

Установите КОРС:

npm install cors --save

Затем на вашем экспресс-сервере:

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')
})

ПРИМЕЧАНИЕ. Это всего лишь пример реализации, который может измениться в зависимости от вашей реализации.

24.11.2018
  • SiddAjmera, наш ответ правильный. Я тоже получил минус. добавил ваш голос 24.11.2018
  • Спасибо, сэр, вы только что спасли мою голову от поломки, и я до сих пор не голосовал, сэр. Спасибо за вашу помощь 24.11.2018
  • @freepowder, на самом деле мы упустили ключевую вещь. Ошибка консоли представляла проблему с политикой CORS. Поэтому CORS пришлось реализовать на экспресс-сервере OP. Это то, что мы пропустили и, следовательно, проголосовали против. Чего я не понял, так это того, почему мой второй ответ был отклонен. Это общая вежливость, чтобы сказать, почему кто-то минусует. 24.11.2018
  • @SiddAjmera CORS был еще одной проблемой, связанной с плохой подписью метода публикации. Как я уже сказал в другом комментарии, ваш ответ был правильным (как и мой). И отрицательные голоса исходят от людей, которые не предлагают никакого технического решения, просто смотрят вокруг, пытаясь вести себя так, как будто они что-то знают об этом. 24.11.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..