Question

我通过以下方式在我的应用中添加了aftership：

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-aftership-agent不允许飞行前响应中的Access-Control-Allow-Header。 Tracking.js：28 TypeError：无法获取Tracking.js：28未定义

有人可以帮助我解决我的问题吗？

Answer 1

这看起来像一个Cross-Origin Resource Sharing (CORS)问题。简而言之，您正在与第三方一起使用本地开发主机。为避免此类错误，您可以使用https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi之类的Chrome扩展程序。此扩展会将响应标头编辑为Access-Control-Allow-Headers: '*'，该标头允许请求正文中的所有标头。

不建议将其日常使用，因此我建议仅对要使用的API添加通配符。在这种情况下，请将https://api.aftership.com/*添加到扩展程序设置

售后Api与React提取问题

1 个答案: