Как сделать POST запрос, крик души?

Question

[Galdar Turin]

Добрый день!
Делаю запрос через Angular, исходник установлен на сертифицированном сервере. Но выдает вот такую ошибку:

Первый способ

Ошибка:

Код:

var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api3.******/');
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');


    xhr.responseType = 'json'

    xhr.onload = () => {
      console.log(xhr.response)
    };

    xhr.send(JSON.stringify({
      "login": "******",
      "pass": "*****"
    }));

Второй способ

Ошибка:

Код:

let headers = { headers: new HttpHeaders({'Content-Type': 'application/json; charset=UTF-8'}) }
    let body = new HttpParams()
    body.set("login", "******")
    body.set("pass", "******")



    this.http.post<any>('https://api3.******',
      body,
      headers
    ).subscribe((data)=>{
      console.log(data)
    })

Как решить эту проблему и получить ответ от сервер? Я уже весь инет перерыл. Уже и с CROS находил ответ и без и только как не пробовал, но не работает именно в Angular. Я уже думаю может нужно установить библиотеку!

Comments

[Kovalsky]

Вам просто в ответ ничего не приходит, и всё. А почему это происходит надо узнать у разработчика этого API

[Galdar Turin]

Kovalsky, ну если делать запрос с сервера через nodejs. То все прекрасно приходит. Если отправляю через Angular то запрос ему да же не приходит, смотрел по логам.

[Kovalsky]

Galdar Turin, что такое post у вас?

Ну попробуйте fetch, покажите запрос, скажите какой результат

[Galdar Turin]

Kovalsky,
Арсений Матыцин

fetch("https://api3.****", { 
        method: "POST",
        headers: {
            'Content-Type': "application/json; charset=UTF-8"
        },
        body: JSON.stringify({
          "login": "****",
          "pass": "****"
        })
    })
    .then(function(response){
        console.log(response.json());
    })
    .catch(error => {
        console.log(error)
    });

[Kovalsky]

Galdar Turin, а что написано во вкладке network? В списке запросов в консоли

[Galdar Turin]

Kovalsky,

[Galdar Turin]

Kovalsky,
Заметил вот еще такую особенность, в ФОКСЕ выдает ошибку CROS, но как? Если сервер с которого идет отправка имеет сертификат и естественно у противоположного сервера есть сертификат...

Answer 1

[Антон Швец]

this.http.post(url, {
  login, password
})

ниче не надо больше.
Подписываешься, реквест отправляется, json в body будет автоматом.

Comments

[Galdar Turin]

Антон Швец, мне нужно обязательно отправлять заголовок, это прописано в api, иначе данные просто не будут приниматься.
Но да же если и так, то все равно та же ошибка:

this.http.post(url, {
  login, password
})

[Антон Швец]

Galdar Turin, проверьте работоспособность апи каким нибудь http клиентом.

[Galdar Turin]

Антон Швец, через php curl работает

Answer 2

[Александр]

Поставьте axios, это стандарт для работы с запросами
и что это у вас в коде this.http.post
вы так отправляете запрос?

Comments

[Galdar Turin]

Александр, private http: HttpClient

[Александр]

редактор порезал код, сорри
я об этом

[Galdar Turin]

Александр, про axios спасибо, щас посмотрю. А по поводу и с ней и без нее, разные варианты в инете находил, уже столько вариаций перепробовал, а ошибка осталась

Answer 3

[Арсений Матыцин]

Заюзай fetch, посмотри что отдает.
https://developer.mozilla.org/ru/docs/Web/API/Fetc...

Comments

[Galdar Turin]

Арсений Матыцин
Пробовал кстати, вот что пишет

fetch("https://api3.****", { 
        method: "POST",
        headers: {
            'Content-Type': "application/json; charset=UTF-8"
        },
        body: JSON.stringify({
          "login": "****",
          "pass": "****"
        })
    })
    .then(function(response){
        console.log(response.json());
    })
    .catch(error => {
        console.log(error)
    });

[Арсений Матыцин]

Galdar Turin, а, ну так в ответ ничего и не приходит.

Поэтому если у тебя классово все верно по конфигурации входа и т.д., то скорее всего либо разраб API где-то облажался (может там стоило бы отдать ошибку, хз), а при беглом гуглении я обратил внимание, что могут и расширения браузера поднасрать. Гуглянь ошибку «err_empty_response»

[Galdar Turin]

Арсений Матыцин,
Заметил вот еще такую особенность, в ФОКСЕ выдает ошибку CROS, но как? Если сервер с которого идет отправка имеет сертификат и естественно у противоположного сервера есть сертификат...

[Арсений Матыцин]

Galdar Turin, ну это уже другая обширная тема, впрочем, ты можешь попробовать в fetch задавать флаг no-cors (там в документации было). И, узнать что на этот счет по заголовкам в API. Т.е. на стороне бэкенда по сути.

При этом проблема CORS существует на фронтенде, но ее нет, если запросы отправлять и ловить бэкендом к бэкенду.

[Galdar Turin]

Арсений Матыцин, щас попробую

[Galdar Turin]

Арсений Матыцин,
C флагом no-cors выдает что-то такое, хоть что-то новое) Но не работает))

[Арсений Матыцин]

Galdar Turin, ну тут судя по ошибке, отдается кривой JSON, который не парсится.

Впрочем, проверь еще раз свой код. Я на самом деле достаточно поверхностно отвечаю.

[Galdar Turin]

Арсений Матыцин,
)) не тут все норм, это просто я по быстрому скинул, ответ пустой короче приходит

Ошибок нет, но ответа то же

[Арсений Матыцин]

Galdar Turin, статус успешного запроса должен быть 200.

https://developer.mozilla.org/en-US/docs/Web/API/R...

[Kovalsky]

Galdar Turin, флаг no-cors вас не спасет, попробуйте поставить в браузер расширение отключающее CORS, для хрома например вот. Если с отключенным CORS проблема не исчезает, то значит проблема не в CORS

[Арсений Матыцин]

На самом деле я бы рекомендовал погонять это все дело не в неповоротливом куске кода, а на уровне curl. Посмотреть заголовки, что приходят, что в ответах и т.д.

[Kovalsky]

В хроме кстати если нажать на правую кнопку мыши, то можно там выбрать "Copy as cURL", после чего скопированный запрос можно сразу кинуть в curl

[Арсений Матыцин]

Galdar Turin, таки шо в итоге? Разобрался?

[Galdar Turin]

Арсений Матыцин, да, но все же не понятно как отправлять запрос с самого фронта. Сейчас мой фронт обращается к бэку и уже бэк делает запрос по API. Напрямую к API запроса через фронт сделать не получается)

[Арсений Матыцин]

Galdar Turin, если бэк ловит норм, а фронт заворачивается при правильной конфигурации, то проблема на стороне API.

Answer 4

[Денис Щербина]

На клиенте пиши так:

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class Твой_класс {

  headers = new HttpHeaders();
  options = { headers: this.headers, withCredintials: false };

  constructor(private http: HttpClient) {}

  post(data: any) {
    this.http.post('https://........./', data, this.options).subscribe(data => {
       console.log('Ответ сервера: ', data); 
       // Затем смотри, что лежит в data, вероятно просто json поломанный приходит.
       // Проверить ответ на корректность можно здесь: http://json.parser.online
    }
  }
}

Comments

[Galdar Turin]

Denis_maker, если передаю так то на сервер приходят пустые данные, а точнее 0

[Денис Щербина]

Galdar Turin, если сервер на node.js, можешь вот так данные получить:

var multer  = require('multer')
var upload = multer({ dest: "./upload/" });

app.post('/get_message', upload.array(), async (req, res) => {
  console.log('получил: ', req.body['здесь ключ']);
})

придется доустановить модуль: npm install --save multer

[Денис Щербина]

Galdar Turin, кстати, попробуй вот эту ерунду на клиенте, чтобы данные правильно на сервер отправлять:

let postData = new FormData();
postData.append('login', '');
postData.append('pass', '');
this.http.post('https://..../', postData).subscribe(data => {
         console.log('true: ', data);
      }, err => {
         console.log('JS Call error: ', err);
      });