Question

即使我的代码位于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。是的，我知道我们不应该在GET请求中发送Content-Type标头。但是，我已经阅读了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);
})

它有效！在这两种情况下（使用Postman和fetch()），我的API都会返回所需数据。

但是，当我尝试使用Axios时，会收到带有“未经授权”字样的401响应，这意味着Axios没有正确发送标头。

现在，这个问题。还有其他方法可以在axios GET请求中发送标头吗？无论fetch()和Postman情况如何，我如何都可以强制Axios发送标头？

Answer 1

如果您发送的请求没有正文，Axios会自动（as it should）删除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()）。

如何强制axios GET请求发送标头？

1 个答案: