Почему не удаётся отправить POST-запрос с помощью ajax на localhost:3000 (сервер — node.js)?

Question

[tj57]

Есть форма, данные которой отправляются на сервер с помощью AJAX-запроса. Скрипт выглядит так:

$(document).ready(function() {

  $("#btn").click(
   function(){
     sendAjaxForm('result_form', 'ajax_form', 'http://127.0.0.1:3000/users');
     return false;
   }
 );

 function sendAjaxForm(result_form, ajax_form, url) {
    $.ajax({
        url:     url,
        type:     "POST",
        dataType: "jsonp",
        data: $("#"+ajax_form).serialize(),
        success: function(response) {
        	result = $.parseJSON(response);
        	$('#result_form').html('Имя: '+result.firstname+'<br>Фамилия: '+result.lastname+'<br>Пол: '+result.sex+'<br>Телефон: '+result.phone+'<br>E-mail:'+result.email+'<br>Дата рождения:'+result.birthdate);
          //console.log("Done");
    	},
    	error: function(response) {
            $('#result_form').html('Ошибка. Данные не отправлены.');
    	}
 	  });

  }

});

При cабмите формы возникает ошибка, связанная с CORS: Access to XMLHttpRequest at '127.0.0.1:3000/users' from origin '127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


Было добавлено поле в ajax-запрос:
crossDomain: true,

Появилась другая ошибка:
GET 127.0.0.1:3000/users?callback=jQuery33105526281406... net::ERR_ABORTED 404 (Not Found)


Также была попытка использовать плагин, который обходит CORS блокировку: https://chrome.google.com/webstore/detail/allow-co...
Он был активирован и сразу при обновлении страницы начала появляться такая ошибка, при этом она повторяется :
Access to XMLHttpRequest at 'localhost:8080/sockjs-node/info?t=1543437737940' from origin '127.0.0.1:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Также появляется сообщение о дисконнекте

Как можно решить эту проблему ?

Comments

[Lynn «Кофеман»]

Вам же английским по белому написано 404 Not Found.
Проверяйте адрес и свой сервер на ноде

[tj57]

Алексей Тен, там с адресом все нормально

Answer 1

[shmatuan]

CORS на сервере прописать нужно

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, PUT, PATCH, POST, DELETE");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    next();
});

Comments

[tj57]

я добавил хэдеры в коде сервера, но это частично решило проблему. В начале я тестировал скрипт, просто создавая объект с некоторыми полями, который отправляется на сервер, также немного поменял скрипт:

function sendAjaxForm(result_form, ajax_form, url) {
let data = {
     name: "misha",
     age: 20,
     city: "Msc" 
   };
...
contentType: "application/json; charset=utf-8",
  dataType:"json",
  data: JSON.stringify(data),
  xhrFields: {
    withCredentials: false
}
  success: function(response) {
        console.log(response);
        $('#result_form').html(response);
  	},
...

В этом случае всё нормально работает. Когда я начал добавлять в объект data данные из моей формы, то снова начала появляться ошибка CORS.

let data = {};
   data = JSON.stringify($('form').serializeObject());