Как заставить axios GET запрос отправлять заголовки? - PullRequest
Новая
       34

Как заставить axios GET запрос отправлять заголовки?

1 голос
/ 05 июня 2019

Несмотря на то, что мой код находится внутри одного из моих компонентов в Vue, проблема в Axios, позвольте мне объяснить, почему. Итак, я пытаюсь получить некоторую информацию, например: 

axios.get('http://localhost:8181/roles/1',  
  {
    headers: {
      'Api-Token': 'tokenTOKEN',
      'Content-Type': 'application/json'
    }
  }
)
.then(response => {console.log(response)})
.catch(response => {
  console.log(response);
})

Итак, да, я правильно импортирую Axios. Да, я знаю, что мы не должны отправлять заголовок Content-Type в запросе GET. Тем не менее, я уже читал RFC 7231, и он не говорит, что это невозможно, просто не часто. Итак, мы хотим отправить заголовок Content-Type в моем запросе.

Итак, откуда мне знать, что это не работает? Ну, одна из моих промежуточных программ в моем Lumen API выглядит следующим образом: 

<?php

namespace App\Http\Middleware;

use Closure;

class JsonVerifier
{
    public function handle($request, Closure $next)
    {
        if($request->isJson())
        {
            return $response = $next($request);
        }
        else
        {
            return response('Unauthorized.', 401);
        }
    }
}

Я пытался использовать Postman для отправки этого конкретного запроса GET, и это работает. Я пытался использовать fetch() так: 

var miInit = { method: 'GET',
               headers: {
                 'Api-Token': 'tokenTOKEN',
                 'Content-Type': 'application/json'
             },
             mode: 'cors',
             cache: 'default' };

fetch('http://localhost:8181/roles/1',miInit)
.then(function(response) {
  console.log(response);
})

и это работает! В обоих случаях (с почтальоном и fetch()) мой API возвращает данные о желании.

Однако, когда я пытаюсь использовать Axios, я получаю ответ 401 со словом «Unauthorized», что означает, что Axios неправильно отправил заголовок.

Теперь вопрос. Есть ли другой способ отправить заголовки в GET-запросе axios? Как я могу заставить Axios отправлять заголовки независимо от того, как это выглядит в fetch() и Postman?

1 Ответ

2 голосов
/ 05 июня 2019

Axios автоматически ( как следует ) удаляет заголовок Content-Type, если вы отправляете запрос без тела, как вы делаете с любым запросом GET.

https://github.com/axios/axios/blob/2ee3b482456cd2a09ccbd3a4b0c20f3d0c5a5644/lib/adapters/xhr.js#L112

// Add headers to the request
if ('setRequestHeader' in request) {
  utils.forEach(requestHeaders, function setRequestHeader(val, key) {
    if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
      // Remove Content-Type if data is undefined
      delete requestHeaders[key];
    } else {
      // Otherwise add header to the request
      request.setRequestHeader(key, val);
    }
  });
}

Возможно, вы ищете заголовок Accepts и $request->wantsJson() (или acceptsJson()).

...