Почему JQuery формирует такой запрос?

Question

[HellWalk]

Есть такой запрос, сформирован через Postman:

POST /API/V0.1/schedule_query/ESIAFindAccount/ HTTP/1.1
Content-Type: application/json
X-Auth-Token: xxx
User-Agent: PostmanRuntime/7.20.1
Accept: */*
Cache-Control: no-cache
Postman-Token: 74d8ebff-9eba-487f-951c-7e51310bfc46
Host: 192.168.88.3:9090
Accept-Encoding: gzip, deflate
Content-Length: 359
Connection: keep-alive

{
    "RoutingCode": "TESIA",
    "SnilsOperator": "135-419-238 52",
    "ra": "1000321282",
    "lastName": "Тестов",
    "firstName": "Тест",
    "middleName": "Тестович",
    "doc": {
        "type": "RF_PASSPORT",
        "series": "1111",
        "number": "111111"
    },
    "mobile": "[phone]",
    "snils": "229-785-346 20"
}

Нужно сделать такой же запрос с фронта. Пишу такой код:

let ESIAFindAccount = {
        "url": "http://192.168.88.3:9090/API/V0.1/schedule_query/ESIAFindAccount/",
        "data": {
            "RoutingCode": "TESIA",
            "SnilsOperator": "135-419-238 52",
            "ra": "1000321282",
            "lastName": "Тестов",
            "firstName": "Тест",
            "middleName": "Тестович",
            "doc": {
                "type": "RF_PASSPORT",
                "series": "1111",
                "number": "111111"
            },
            "mobile": "[phone]",
            "snils": "229-785-346 20"
        },
        headers: {
            "Content-Type": "application/json",
            "X-Auth-Token": "xxx"
        }
    };

    function ajax() {
        $.ajax({
            type: 'POST',
            url: ESIAFindAccount.url,
            data: ESIAFindAccount.data,
            headers: ESIAFindAccount.headers,
            success: function (data) {
                console.log(data);
            }
        });
}

Уходит такой запрос:

OPTIONS /API/V0.1/schedule_query/ESIAFindAccount/ HTTP/1.1
Host: 192.168.88.3:9090
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://web-form.loc
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
Access-Control-Request-Headers: content-type,x-auth-token
Accept: */*
Referer: http://web-form.loc/smev_demo
Accept-Encoding: gzip, deflate
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7,bg;q=0.6,vi;q=0.5

Я всякого видел, но чтобы так поменялся запрос - это что-то с чем-то. Откуда OPTIONS? Почему метод POST ушел в заголовки? Куда исчезли заголовки и body?

Кто-нибудь может рассказать про такие чудеса js, и что нужно написать, чтобы отправился запрос именно из первого примера?

Answer 1

[HellWalk]

Решение было найдено, пусть и костыльное (хотя со стороны бэка весь js это один костыль)

Код остался таким же, только убрано изменение headers:

function ajax() {
        let ESIAFindAccount = {
            "url": "http://192.168.88.3:9090/API/V0.1/schedule_query/ESIAFindAccount/",
            "data": {
                "RoutingCode": "TESIA",
                "SnilsOperator": "135-419-238 52",
                "ra": "1000321282",
                "lastName": "Тестов",
                "firstName": "Тест",
                "middleName": "Тестович",
                "doc": {
                    "type": "RF_PASSPORT",
                    "series": "1111",
                    "number": "111111"
                },
                "mobile": "[phone]",
                "snils": "229-785-346 20"
            },
        };

        $.ajax({
            method: 'POST',
            url: ESIAFindAccount.url,
            data: JSON.stringify(ESIAFindAccount.data),
            success: function (data) {
                console.log(data);
            }
        });
    }

Потому что, как оказалось, через js можно отправить POST запрос, но только если не изменять headers. Если что-нибудь добавить в headers - метод запроса сразу изменяется на OPTIONS

Плюс, на беке отключили требование к X-Auth-Token. Для разовой презентации, после которой этот код использоваться не будет - пойдет.

Answer 2

[hzzzzl]

OPTIONS всегда делается перед запросом к серверу, это вопрос "эй сервер, ты примешь post-запрос от меня или нет?"

https://developer.mozilla.org/ru/docs/Web/HTTP/Met...
https://developer.mozilla.org/en-US/docs/Glossary/...

Если запрос может оказать влияние на пользовательские данные, то простого запроса недостаточно. Вместо этого, предполентый CORS запрос отправляется в перед отправкой необходимого запроса, чтобы гарантировать безопасность отправки запроса. Предполетные запросы необходимы в тех случаях, когда любой HTTP метод, отличный от GET, POST, HEAD или если тип содержимого POST запроса отличен от application/x-www-form-urlencoded, multipart/form-data или text/plain. Также, если запрос содержит любые собственные заголовки, то необходим предполетный запрос.

https://spring-projects.ru/understanding/cors/

Comments

[HellWalk]

всегда делается

При запросе через Postman или из PHP - ничего такого нет. Не нужно обобщать правила "замечательного JavaScript" на всех)

Ладно, я понял, что ваши слова относятся к js, не буду придираться)

[Алексей Ярков]

HellWalk, вот и не надо иронизировать. JavaScript тут ни при чем. ЕМНИП это браузера фича.

[hzzzzl]

HellWalk, Алексей Ярков, так точно, потому что PHP делает запрос со стороны сервера, к серверу CORS не относится

https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

спецификация требует, чтобы браузеры "предпроверяли" запрос, запрашивая поддерживающие методы с сервера с помощью метода HTTP-запроса OPTIONS и затем, поверх "подтверждения" с сервера, отсылали фактический запрос с фактическим методом HTTP-запроса

[Александр]

HellWalk, просто оставлю это тут https://ru.wikipedia.org/wiki/HTTP#OPTIONS и https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html (пункт 9.2)

[HellWalk]

Seasle, хорошо-хорошо, убедили, с OPTIONS все ок.
В любом случае - то, что написано js-коде, и реально отправляемый запрос очень сильно отличаются. И это вызывает недоумение.

[HellWalk]

Не смотря на официальную документацию, мне удалось отправить запрос методом POST:
Почему JQuery формирует такой запрос?

Answer 3

[imsha]

data : JSON.stringify(ESIAFindAccount.data)

Answer 4

[Александр]

Можно еще так. Запрос OPTIONS выполняется отдельно, после него POST.

const request = new Request('http://192.168.88.3:9090/API/V0.1/schedule_query/ESIAFindAccount/', {
	method: 'POST',
	headers: new Headers({
		'Content-Type': 'application/json',
		'X-Auth-Token': 'xxx'
	}),
	body: JSON.stringify({
		RoutingCode: 'TESIA',
		SnilsOperator: '135-419-238 52',
		ra: '1000321282',
		lastName: 'Тестов',
		firstName: 'Тест',
		middleName: 'Тестович',
		doc: {
			type: 'RF_PASSPORT',
			series: '1111',
			number: '111111'
		},
		mobile: '[phone]',
		snils: '229-785-346 20'
	})
});

fetch(request).then(response => response.json()).then(console.log);