CODEWITHSUNDEEP
javascriptreactjsaxios
Mahesh
Mahesh

Reputation: 1333

axios request getting blocked | Reactjs

I am trying to hit an endpoint in my reactjs code using axios but the request is getting blocked and I am getting the following error in my console.

Please suggest how to overcome this

enter image description here

Below is my code

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);
  })
}

Upvotes: 0

Views: 1861

Answers (2)

Niraj Patel
Niraj Patel

Reputation: 810

The reason you're getting this error is because https://randomuser.me expects request from secured origin using https protocol and localhost by default does not runs over https. If this is not satisfied it will be returned as a warning/error by your browser.

However, if you have generated React Project using create-react-app then you can add following script in your package.json:

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

Please refer document of Create React App for more details.

Upvotes: 2

Nisharg Shah
Nisharg Shah

Reputation: 19522

It's working fine, please check here

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

sometimes this error coming because you started any plugin/extention of cors in your browser

Upvotes: 2

Related Questions