axios 请求被阻止 | Reactjs

Question

我试图使用我的reactjs代码中的端点axios，但请求被阻止，并且我在控制台中收到以下错误。请建议如何克服这个问题下面是我的代码import * as React from 'react';import axios from "axios"export default function App(){  return (    <>      <button onClick={fetchdata}>Click Me</button>    </>  )}function fetchdata(){  const axios = require('axios');    // Make a request for a user with a given ID  return axios.get('https://randomuser.me/api')    .then(response => {      // handle success      console.log(response);      return response;    })    .catch(error => {      // handle error      console.log(error);  })}

Answer 1

您收到此错误的原因是因为https://randomuser.me期望使用 https 协议来自安全来源的请求，并且默认情况下 localhost 不会通过 https 运行。如果不满足这一点，您的浏览器将作为警告/错误返回。

但是，如果您使用以下方法生成了 React 项目，create-react-app则可以在 package.json 中添加以下脚本：

"proxy": "https://randomuser.me"

Answer 2

工作正常，请检查这里

Codesandbox：https://codesandbox.io/s/muddy-dust-yvotv?file=/src/ App.js

有时出现此错误是因为您在浏览器中启动了 cors 的任何插件/扩展