Как делается Preflight запрос?

Question

[newaitix]

В сети есть объяснения что при запросе должны быть заголовки

Origin: http://yourdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

И при ответе должны быть заголовки

Access-Control-Allow-Origin: http://yourdomain.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header

А тело ответа должно быть пустым.

Но во первых Origin не возможно установить он и так будет установлен автоматически. А во вторых даже если так сделать то это будет обычный POST запрос а не Preflight запрос.

<script>
function fu(){
	var invocation = new XMLHttpRequest();
var url = '/ajax_quest.php';
var body = '<\?xml version=\"1.0\"\?><person><name>Arun</name></person>';


  if(invocation)
    {
      invocation.open('OPTIONS', url, true);
      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
      invocation.setRequestHeader('Content-Type', 'application/xml');
      invocation.onreadystatechange = function(){
      
      };
      invocation.send(body);
    }
}
</script>
<button onclick="fu()">Submit</button>

<?
header('Access-Control-Allow-Origin: https://test.logreel.xyz');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: X-Custom-Header');
?>

Answer 1

[Максим Бабичев]

Preflight запрос делает браузер автоматически, вам об этом заботиться не нужно.
https://developer.mozilla.org/en-US/docs/Glossary/...

A preflight request is automatically issued by a browser and in normal cases, front-end developers don't need to craft such requests themselves. It appears when request is qualified as "to be preflighted" and omitted for simple requests.

Comments

[Максим Бабичев]

А вообще, это обычный запрос методом OPTIONS.
На бэкэнде каждый endpoint должен отдавать необходимые заголовки и код 200 на OPTIONS запрос.

Если в запросе будет участвовать кастомный заголовок, то браузер автоматически сделает preflight запрос

[newaitix]

Ну вот в том то и дело что я делаю запрос а он не Preflight.
Хочу понять почему?

[newaitix]

Максим Бабичев, Добавил о вопрос код.

[Максим Бабичев]

newaitix, вручную (кодом) его не сделать. Браузер сам сделает запрос, если это требуется нужно.

[newaitix]

Максим Бабичев, а есть инфа о том в каком случае браузер примет такое решение?

[Максим Бабичев]

newaitix, https://developer.mozilla.org/en-US/docs/Web/HTTP/...

[newaitix]

Максим Бабичев, Я пробовал этот вариант но ничего не вышло.

[Максим Бабичев]

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://bar.other/resources/post-here/');
xhr.setRequestHeader('X-PINGOTHER', 'pingpong');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = () => {};
xhr.send('<person><name>Arun</name></person>');

[Максим Бабичев]

newaitix, FYI^

[Максим Бабичев]

https://codepen.io/REZ1DENT3/pen/yLVQEeR

[newaitix]

Максим Бабичев, ну так это не Preflight запрос.

[Максим Бабичев]

newaitix, это как раз он. если endpoint на который стучимся ответит 200 и отдаст необходимые заголовки на первый запрос OPTIONS

[newaitix]

Максим Бабичев, тогда скажите что об этом свидетельствует?
Referrer Policy: strict-origin-when-cross-origin
?

[Максим Бабичев]

newaitix, это реферальная политика запроса. Я не понял ваш вопрос.
Пожалуйста, опишите подробнее.

[newaitix]

Максим Бабичев, как понять что это был именно Preflight запрос?
Как по мне на вашем скрине обычный запрос.

[Максим Бабичев]

newaitix, preflight запрос выполняется браузером автоматически, это всегда OPTIONS запрос (вот и главный критерий). Эвентов для событий, вроде, нет. Отслеживать кодом это не выйдет, если у вас задача по отслеживанию.

[OCTAGRAM]

newaitix, в Firefox всё довольно прозрачно