无法使用 Axios 从 localhost 进行 LinkedIn API 调用

Question

我正在尝试使用 axios get 请求访问linkedin 配置文件，这在 localhost 上不起作用，我收到以下错误

XMLHttpRequest 无法加载 https://api.linkedin.com/v1/people/~:(id,email-address)?format=json。 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:8030” 使用权。响应的 HTTP 状态代码为 401。

我可以使用react-linkedin-login 包获取访问令牌，获取访问令牌后我正在尝试以下代码

var linkedInUrl = `https://api.linkedin.com/v1/people/~:(id,email-address)?format=json`;
  var headers = {
    'Authorization': `Bearer ${accessToken}`,
    'Access-Control-Allow-Methods':'GET,PUT,PATCH,POST,DELETE',
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Request-Headers':'Origin, X-Requested-With, Content-Type, Accept',
    'Content-Type':'application/x-www-form-urlencoded'
  };

  return (dispatch) => {
    axios.get(linkedInUrl, {headers}).then(({data}) => {
        console.log(data);
    }, (error) => {
        console.log(error);
    });
  }

我猜问题在于linkedin服务器如何接受请求，我认为它不允许本地主机拨打电话。在我在服务器上部署和运行之前，如何克服这一点来实际开发服务。

感谢您的帮助..

Answer 1

这是因为浏览器限制称为“同源策略”，该限制会阻止从属于其他域的 URL 获取数据或向其发布数据。如果其他域支持跨域资源共享 (CORS)，您可以绕过它，但看起来 LinkedIn 不支持，所以您可能会遇到麻烦。

解决此问题的一种方法是拥有一个可以将您的请求代理到 LinkedIn 的网络服务 - 那里没有域限制。

https://en.wikipedia.org/wiki/Same-origin_policy

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Answer 2

尝试 jsonp 获取 CORS 请求 - 参考 - axios cookbook

var jsonp = require('jsonp');
jsonp(linkedInUrl, null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

编辑

使用 jQuery 执行 JSONP 请求并设置标头

$.ajax({url: linkedInUrl,
  type: 'GET',
  contentType: "application/json",
  headers: header, /* pass your header object */
  dataType: 'jsonp',
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.log('Error', err);
  },
});

Answer 3

https://cors-anywhere.herokuapp.com/ - 在 url 之前添加这个就可以了