CORS 策略已阻止从源“http://localhost:3000”访问 XMLHttpRequest答案

【问题标题】：Access to XMLHttpRequest from origin 'http://localhost:3000' has been blocked by CORS policyCORS 策略已阻止从源“http://localhost:3000”访问 XMLHttpRequest
【发布时间】：2021-03-08 00:38:23
【问题描述】：

我是 React 的新手。我正在创建一个小型 CRUD 应用程序。我有一个所有用户的列表。为此，我有一个在邮递员上运行良好的 API，但是当我在我的 react 应用程序中使用该 API 时出现问题。这是我得到的错误

Access to XMLHttpRequest at 'http://dummy.restapiexample.com/api/v1/employees' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

但如果我将 Url 从http://dummy.restapiexample.com/api/v1/employees 更改为https://jsonplaceholder.typicode.com/albums，则可以正常工作。

这是我的代码。

constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    }
  }

  componentDidMount() {
    // const token = 'pt7_VZpxd6jOooNILFwO1qEc5lzLifeN';
    let webApiUrl = 'http://dummy.restapiexample.com/api/v1/employees';
    // let webApiUrl = 'https://jsonplaceholder.typicode.com/albums';

    axios.get(webApiUrl, {
      method: "GET",
      mode: "no-cors",
      headers: {
        "Content-Type": "application/json",
        // "Authorization": "Bearer " + token,
        "Access-Control-Allow-Methods": "GET",
        "Access-Control-Allow-Origin": "*",
      },
    })
    .then( res => {
      this.setState({ isLoaded: true, items: res.data})
    })
  }

我已经关注了这些链接No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API , Access to XMLHttpRequest has been bloked by CORS policy 但仍然坚持这个问题。如何解决这个问题。任何帮助将不胜感激。

【问题讨论】：

你可以查看stackoverflow.com/a/43881141/5990249
CROS 策略错误是基于后端的。您向其发出请求的服务器，您需要允许对其进行 ping 操作。如果后端在 node.js 中，请使用 NPM CROS Package
这能回答你的问题吗？ XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header

标签： javascript cors

【解决方案1】：

此 SO 帖子中的解决方案可能与您的问题有关。觉得我会分享，因为它看起来很相关。

Axios having CORS issue

【讨论】：

【解决方案2】：

所以我已经使用fetch 尝试了您的代码 sn-p，我能够获取数据。有时我没有得到我认为too many requests issue (429) 的数据，我认为这是服务问题。

尝试fetch 让我知道它是否有效，可能是在 axios 中，一些标题问题是问题所在。

下面是sn-p代码

import "./App.css";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "http://dummy.restapiexample.com/api/v1/employees"
        );
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.log(error.message);
      }
    };

    fetchData();
  }, []);

  return <div className="App"></div>;
}

export default App;

可能从这里你可以开始了解它。 Ref。我认为正如提到的那样，它是 cors 问题。这是一个常见问题，因此在您的情况下，您可以通过在服务前面添加代理 url 来解决

示例

axios.get(`https://cors-anywhere.herokuapp.com/http://dummy.restapiexample.com/api/v1/employees`)

我希望这能让你更好地理解。

【讨论】：

【解决方案3】：

如果您使用自己的后端，那么添加 "proxy": "http://localhost:3000" 或您在客户端或 react 项目文件夹中指定的任何后端 host port 会更容易和专注，如下所示：-

client/package.json 或 reactFolder/package.json

{
  "name": "projectname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  ...}
  "proxy": "http://localhost:5000"
}

那么你可以这样做：-

await axios.get('/api/products') // straight away use whatever path you've specified

【讨论】：