Пользовательские заголовки запроса не отправляются с запросом на выборку JavaScript

Question

Я пытаюсь использовать API JavaScripts Fetch() для отправки запроса AJAX на мой сервер PHP OAuth.

Моя проблема заключается в том, что мне нужно, чтобы послать запрос заголовок Authorization с

'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjM3MWFjZTRiZWE1NmViZDQ5YzQ1OTFkMmJiY2E4NGMwOTM2N2JiMjZmNjZiMmJkOTkxZmE3YmU0NTJjYWZmODBkMmZlYmJhYjFjNzMyMmM1In0.eyJhdWQiOiIxIiwianRpIjoiMzcxYWNlNGJlYTU2ZWJkNDljNDU5MWQyYmJjYTg0YzA5MzY3YmIyNmY2NmIyYmQ5OTFmYTdiZTQ1MmNhZmY4MGQyZmViYmFiMWM3MzIyYzUiLCJpYXQiOjE0ODA1NTE5NzIsIm5iZiI6MTQ4MDU1MTk3MiwiZXhwIjoxNTA3NzY3OTcyLCJzdWIiOiI0Iiwic2NvcGVzIjpbImNydWQtYm9va21hcmstY29sbGVjdGlvbnMiLCJjcnVkLWJvb2ttYXJrLXRhZ3MiLCJjcnVkLWJvb2ttYXJrcyJdfQ.YZWbwDXx4gsUtmvLP1GOY2XUnQ5MC030ymfoV6AYjgQMOqKnsmwrsYrTv5q6MVzo50_SMLipyA9t2VgpZkXj6tOdzA-v9idGnV8JVy-GZeceRlhgl7mpnAe1icI5P62mfhHQiyAdF2cfH6OKsy3ONzyzXRw1_pm-5o_qzcNbUGIATnKr5jXbYElRZZlh7-TUBQ2aSnEsu_fOR2rX5zZ_2dhpAMyE5GOK-UODhjs9PQVLXEEtnlzXyRIdjv-2YTuwJzLryHoooP4N5SncvkBlA6mk0IXVnVnJAMkomnkulofmn1k1niK6Dnzk8OANjbi_uPNbj4W2EtHA0tENNKDfAJ9maiHQZgmpWVk_rkKPrw04BogJNq682mgZhRwYjMM8tD7Rzmrb1DRI8_dM60O5AL5Nm5sxXzKd946OGmMLSQ_OnvAXsAN52KdnlQNW2RzMkFErdrXADMf1g1u7WjH-yo7G9wf-2QMVt8ejrWIbj3_7eBUHIWc4VYg_-IzFMkXl_WXKh12n1RnB62nvyz0IQ5aHbNP0_jIFZixHs0CjuNKikoWguEWfRL78eb2cTyxYMn3E2Yh31RMMaJzF1mM-we05D9WPyQUPKNMuIUQVVRI4GOvny9IJUuGbjcQVLsA-EMbXTBcf9LdRo62gQTNyeCYIshgw3MhX9OazDGK7Xks' 

Это код, я прямо сейчас ....

var app = { 

    init: function() { 
     this.apitest(); 
    }, 

    apitest: function() { 

     var request = new Request('http://bookmarkapi.dev/api/user', { 
      method: 'GET', 
      mode: 'no-cors', 
      headers: new Headers({ 
       'Content-Type': 'application/json', 
       'Accept': 'application/json', 
       'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjM3MWFjZTRiZWE1NmViZDQ5YzQ1OTFkMmJiY2E4NGMwOTM2N2JiMjZmNjZiMmJkOTkxZmE3YmU0NTJjYWZmODBkMmZlYmJhYjFjNzMyMmM1In0.eyJhdWQiOiIxIiwianRpIjoiMzcxYWNlNGJlYTU2ZWJkNDljNDU5MWQyYmJjYTg0YzA5MzY3YmIyNmY2NmIyYmQ5OTFmYTdiZTQ1MmNhZmY4MGQyZmViYmFiMWM3MzIyYzUiLCJpYXQiOjE0ODA1NTE5NzIsIm5iZiI6MTQ4MDU1MTk3MiwiZXhwIjoxNTA3NzY3OTcyLCJzdWIiOiI0Iiwic2NvcGVzIjpbImNydWQtYm9va21hcmstY29sbGVjdGlvbnMiLCJjcnVkLWJvb2ttYXJrLXRhZ3MiLCJjcnVkLWJvb2ttYXJrcyJdfQ.YZWbwDXx4gsUtmvLP1GOY2XUnQ5MC030ymfoV6AYjgQMOqKnsmwrsYrTv5q6MVzo50_SMLipyA9t2VgpZkXj6tOdzA-v9idGnV8JVy-GZeceRlhgl7mpnAe1icI5P62mfhHQiyAdF2cfH6OKsy3ONzyzXRw1_pm-5o_qzcNbUGIATnKr5jXbYElRZZlh7-TUBQ2aSnEsu_fOR2rX5zZ_2dhpAMyE5GOK-UODhjs9PQVLXEEtnlzXyRIdjv-2YTuwJzLryHoooP4N5SncvkBlA6mk0IXVnVnJAMkomnkulofmn1k1niK6Dnzk8OANjbi_uPNbj4W2EtHA0tENNKDfAJ9maiHQZgmpWVk_rkKPrw04BogJNq682mgZhRwYjMM8tD7Rzmrb1DRI8_dM60O5AL5Nm5sxXzKd946OGmMLSQ_OnvAXsAN52KdnlQNW2RzMkFErdrXADMf1g1u7WjH-yo7G9wf-2QMVt8ejrWIbj3_7eBUHIWc4VYg_-IzFMkXl_WXKh12n1RnB62nvyz0IQ5aHbNP0_jIFZixHs0CjuNKikoWguEWfRL78eb2cTyxYMn3E2Yh31RMMaJzF1mM-we05D9WPyQUPKNMuIUQVVRI4GOvny9IJUuGbjcQVLsA-EMbXTBcf9LdRo62gQTNyeCYIshgw3MhX9OazDGK7Xks' 
      }) 
     }); 

     return fetch(request).then(app.checkStatus).then(app.parseJSON); 
    }, 


    checkStatus: function(response) { 
     if (response.status >= 200 && response.status < 300) { 
     return response 
     } else { 
     var error = new Error(response.statusText) 
     error.response = response 
     throw error 
     } 
    }, 

    parseJSON: function(response) { 
     return response.json() 
    }, 

}; 

---

В результате этого в закладке Google Chrome Dev Tools в разделе Заголовки:

Общее:

Request URL:http://bookmarkapi.dev/api/user 
Request Method:GET 
Status Code:401 Unauthorized 
Remote Address:127.0.0.1:80 

Заголовки ответов:

HTTP/1.1 401 Unauthorized 
Date: Thu, 01 Dec 2016 00:41:43 GMT 
Server: Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.23 
X-Powered-By: PHP/5.6.23 
Cache-Control: no-cache 
Content-Length: 28 
Keep-Alive: timeout=5, max=99 
Connection: Keep-Alive 
Content-Type: application/json 

заголовков запроса:

GET /api/user HTTP/1.1 
Host: bookmarkapi.dev 
Connection: keep-alive 
Pragma: no-cache 
Cache-Control: no-cache 
accept: application/json 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 
Referer: http://localhost/labs/webdevapp/tmp/tools/lab/manage_bookmark_list_tags.html 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8 

---

Эти 2 изображения ниже показывают те же самые точные данные отправляются в URL с использованиемapp Почтальон и все отлично работает, поскольку правильные заголовки отправляются, поэтому мой сервер отвечает правильно.

Это изображение показывает мой сервер возвращения с проверкой подлинности ресурсов и заголовки:

Access-Control-Allow-Headers →Authorization 
Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS 
Access-Control-Allow-Origin →* 

Эти заголовки не отображается при создании запроса с JS Fetch() в Chrome или Firefox!

---

Кроме того, когда я использую плагин для отправки пользовательских заголовков в моих браузерах, он работает правильно, так что проблема, как представляется, с Fetch() функции не посылать свои собственные заголовки.

Любые идеи, как я могу получить JS Fetch() для отправки моих настраиваемых заголовков с моей просьбой?

Из всех статей, которые я видел при использовании Fetch, похоже, что я сделал это правильно, однако он не отправляет заголовки в Google Chrome или Firefox, поэтому, похоже, он не работает! Я даже попытался добавить Fetch Pollyfil, чтобы быть в безопасности, не повезло!

Answer 1

Я, наконец, решил проблему. Запрос браузера был на самом деле запросом предпросмотра CORS, в котором мой сервер не возвращал правильные данные, поэтому именно поэтому fetch никогда не отправлял мои заголовки.

Теперь я использую этот пакет Laravel https://github.com/barryvdh/laravel-cors, чтобы добавить поддержку cors для приложения larvel PHP, и он отлично работает!

Answer 2

Вы используете mode: 'no-cors', это предотвращает отправку запроса OPTIONS перед GET. С помощью запроса OPTIONS браузер «уведомляет сервер о том, что при отправке фактического запроса он будет отправлен с некоторыми пользовательскими заголовками. Теперь у сервера есть возможность определить, хочет ли он принять запрос при некоторых обстоятельствах».

Mozilla HTTP OPTIONS method

если вы не реализуете, что обстоятельства, ваш запрос будет умереть OPTIONS.