React： Axios Network Error

Question

这是我第一次使用axios，我遇到了一个错误。

  axios.get(
    `http://someurl.com/page1?param1=1&param2=${param2_id}`
  )
  .then(function(response) {
    alert();
  })
  .catch(function(error) {
    console.log(error);
  });

使用正确的url和参数，当我检查网络请求时，我确实从我的服务器得到了正确的答案，但是当我打开控制台时，我看到它没有调用回调，而是捕获了一个错误。

错误：网络错误堆栈跟踪：createError@http//localhost:3000/static/js/bundle。js:2188:15handleError@http//localhost:3000/static/js/bundle.js:1717:14

Answer 1

当您在本地主机上工作而忘记添加http时，会发生这种情况：//

错误的用法

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // NETWORK ERROR

正确的是

  const headers = {
    "Content-Type": "application/json",
    Authorization: apiKey,
  };
  const url = "http://localhost:5000/api/expenses/get-expenses";

  axios.get(url, { headers });

  // WORKS FINE IF YOU HANDLED CORS CORRECTLY IN THE SERVER SIDE

Answer 2

我的问题是关于我请求的网址。我没有在url的开头插入< code>http://。我的意思是，我请求的是< code > 92 . 920 . 920 . 920/API/Token 这样的url，而不是< code > http://92 . 920 . 920 . 920/API/Token 。添加< code>http://解决了我的问题。

Answer 3

// This should already be declared in your API file
var app = express();

// ADD THIS
var cors = require('cors');
app.use(cors());

要更全面地理解CORS，请阅读关于CORS的Mozilla文档。