使用 React 在 axios 中的 COR 问题答案

【问题标题】：CORs issue in axios using React使用 React 在 axios 中的 COR 问题
【发布时间】：2019-01-30 21:34:55
【问题描述】：

所以我研究了网络并尝试了几乎所有解决方案来解决我使用 yelps fusion API 处理 COR 时遇到的这个问题。我正在使用反应，但试图用 axios 调用这个 API。这是我的代码。

static YelpApiSearch(searchedCity, onSuccess, onError) {
const config = {
  Authorization: process.env.REACT_APP_KEY
  Origin: "https://vendors.test"
};
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
axios
  .get(`https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?categories=foodtrucks&location=${searchedCity}`,
    {
      withCredentials: true,
      headers: config
    }
  )
  .then(onSuccess)
  .catch(onError); }

拒绝设置不安全的标头来源错误

任何帮助将不胜感激。谢谢！

【问题讨论】：

Authorization: process.env.REACT_APP_KEY — 这看起来应该是只有你和 Yelp 才能共享的秘密。您真的想将它提供给 Corsanywhere 和您应用的每个用户，以便他们可以使用您的访问权限调用 Yelp？
您能否解释一下为什么要使用标头设置请求的来源，以及为什么在这种情况下在任何地方都使用 cors？

标签： reactjs cors axios

【解决方案1】：

这本身不是 CORS 问题。错误消息告诉您问题所在。

拒绝设置不安全的标头来源错误

您不能指定 Origin 标头。它由浏览器决定。如果您可以指定它，它将破坏 CORS 的大部分安全性。

从config 对象中删除您指定它的尝试。

【讨论】：