后Api与反应获取问题

Question

我在我的react应用程序中添加了后船，其方式如下：

const Aftership = require('aftership')('put-my-API-KEY', {
    endpoint: 'https://api.aftership.com/v4'
});

let query = {
  page:10,
   limit:5
};
Aftership.call('GET', '/trackings', {
    query: query
  }, (err, result) => {
    console.log(err);
    console.log(result);
  });

export default Aftership;

当我在终端中使用node src/aftership.js时，获取数据会很好(在注释掉最后一行export default Aftership之后)。

但是，当我以以下方式从src/containers/Tracking.js文件中获取时：

import Aftership from '../../aftership';

...

componentDidMount (){
  let query = {
    page:10,
    limit:5
  };
  Aftership.call('GET', '/trackings', {
    query: query
    }, (err, result) => {
      console.log(err);
      console.log(result);
    });
  }

它显示了控制台中的一个错误：

加载https://api.aftership.com/v4/trackings?page=10&limit=5失败:在飞行前响应中，访问控制-允许头不允许请求标头字段x-后代理。Tracking.js:28 TypeError:未能获取未定义的Tracking.js:28

有人能帮我什么是我的问题，我应该知道什么？

Answer 1

这看起来像一个跨源资源共享问题。简单地说，这种情况正在发生，取而代之的是使用本地开发主机和第三方。为了避免这样的错误，您可以使用Chrome扩展，比如https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi。这个扩展将编辑Access-Control-Allow-Headers: '*'的响应头，这允许请求体上的所有头。

这不推荐用于日常使用，因此我建议只为您想要使用的API添加通配符。在本例中，将https://api.aftership.com/*添加到扩展设置