Javascript 使用带有Fetch-in-React-Native的授权标头

我试图在React Native中使用

获取
，从产品搜索API中获取信息。我已经获得了正确的访问令牌，并将其保存到状态，但似乎无法在GET请求的授权标头中传递它

以下是我目前掌握的情况：

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.json())
      .then((responseData) => {
          console.log(responseData);
        this.setState({
          clientToken: responseData.access_token,
        });
      })
      .then(() => {
        this.getPosts();
      })
      .done();
  },
  getPosts: function() {
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    fetch(api.posts.link, obj)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
      })
      .done();
  },

我对代码的期望如下：

首先，我将
从导入的API模块中获取带有数据的访问令牌

之后，我将设置
this.state
的
clientToken
属性，使其等于接收到的访问令牌
然后，我将运行
getPosts
，它将返回一个响应，其中包含来自产品搜索的当前帖子数组
我能够验证是否正在接收访问令牌，以及
this.state
是否正在将其作为其
clientToken
属性接收。我还能够验证
getPosts
是否正在运行

我收到的错误如下：

{“error”：“unauthorized_oauth”，“error_description”：“请提供有效的访问令牌。有关如何授权api请求，请参阅我们的api文档。还请确保您需要正确的作用域。例如访问私有端点的\“private public\”。}

我一直在假设我在授权头中没有正确地传递访问令牌，但似乎无法确切地找出原因。
结果是，我错误地使用了
获取方法

fetch
需要两个参数：API的端点和可包含正文和标题的可选对象

我将预期的对象包装在第二个对象中，但没有得到任何期望的结果

以下是它在高层次上的表现：

fetch('API_ENDPOINT', OBJECT)  
  .then(function(res) {
    return res.json();
   })
  .then(function(resJson) {
    return resJson;
   })

我将我的对象组织为：

var obj = {  
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Origin': '',
    'Host': 'api.producthunt.com'
  },
  body: JSON.stringify({
    'client_id': '(API KEY)',
    'client_secret': '(API SECRET)',
    'grant_type': 'client_credentials'
  })

带有授权标头的示例获取：

fetch('URL_GOES_HERE', { 
   method: 'post', 
   headers: new Headers({
     'Authorization': 'Basic '+btoa('username:password'), 
     'Content-Type': 'application/x-www-form-urlencoded'
   }), 
   body: 'A=1&B=2'
 });

我遇到了同样的问题，我使用django rest knox作为身份验证令牌。结果表明，我的fetch方法没有任何问题，如下所示：

...
    let headers = {"Content-Type": "application/json"};
    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }
    return fetch("/api/instruments/", {headers,})
      .then(res => {
...

我在运行apache

对我来说，解决这个问题的方法是在
wsgi.conf
中将
WSGIPassAuthorization
更改为
'On'

我在AWS EC2上部署了一个Django应用程序，我使用Elastic Beanstalk来管理我的应用程序，因此在
Django.config
中，我做了以下操作：

container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'

您能否提供目前正在运行的代码？我正在尝试将fetch与授权头一起使用，但我不认为我的身份验证代码是作为头传递的，因为我得到了
401
响应。完成，希望能有所帮助哦，我在你的个人网站上看到过这个例子！这就是我第一次为自己建模的方式。我发现了我的问题，只是我的网址错了。它需要一个
/
在我丢失的结尾…谢谢，这很有帮助。值得注意的是，尽管fetch文档指出fetch不处理cookies，但您也可以使用此代码手动将cookies添加到标头中。只需保存uid和键，并执行如下操作：var obj={method:'GET'，headers:{'Accept'：'application/json'，'Content Type'：'application/json'，'Cookie'：'uid='+uid+'；key='+key})；这对我不起作用。
'Authorization'
标题无法自动附加每个firebug。我甚至尝试在可选对象中包含
凭据：“include'
。@RonRoyston是否正在查看选项调用？如果API端点未启用CORS（访问控制允许来源：*如果从其他域访问），然后它可能会在选项调用时失败。api端点没有启用CORS，所以这可能就是它对我不起作用的原因。谢谢。我最终为firefox安装了“CORS everywhere”加载项，并且它起了作用。如果@RonRoyston发现了这个问题，您需要导入btoa库，它不是node的本机库。（它是浏览器库的一个端口。）否则，身份验证头的创建会自动失败。我们也遇到了同样的问题。根据文档，需要使用
new headers（）
对头进行包装，正如中所述，头应该是小写的（有些服务器尊重这一点，其他服务器则不尊重）。我之所以分享，是因为我被它咬了一口，不知道自己（并且浪费了时间试图调试这个问题）不幸的是，这么多的项目、示例和文章似乎并不尊重这一点。@t.j.标题名称不区分大小写，这正是您链接的问题上公认的+最上面的答案所说的。5.5年后，我设置了一个获取标题，就像OP:
“Authorization”：“Bearer”+myJWT，
原来是myJWT被包装在双引号中！
Authorization:Bearer“yadda.yadda.yadda”
在多次尝试解决方案后，我过滤了后端的双引号。
django.config
它在项目中还是在apache配置中？
container_commands:
  01wsgipass:
    command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'