-1

I'm trying to submit an API request based on the tutorial on FREE ASTROLOGY API , but it seems that because the request library is not maintained npm installing it breaks my 100 of my node files all at once. I tried using axios, but I get a lot of errors.

The code works in python, so the API works, but I'm using this for a react web app.

This is the code I tried using:

  useEffect(() => {
    const fetchData = async () => {
      const url = "https://json.freeastrologyapi.com/navamsa-chart-info";
      const payload = JSON.stringify({
        "year": 2022,
        "month": 8,
        "date": 11,
        "hours": 6,
        "minutes": 0,
        "seconds": 0,
        "latitude": 17.38333,
        "longitude": 78.4666,
        "timezone": 5.5,
        "settings": {
          "observation_point": "topocentric",
          "ayanamsha": "lahiri"
        }
      });
      const headers = {
        'Content-Type': 'application/json',
        'x-api-key': 'YOUR_API_KEY_HERE'
      };

      try {
        const response = await axios.post(url, payload, { headers: headers });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

instead of


var request = require('request');
var options = {
  'method': 'POST',
  'url': 'https://json.freeastrologyapi.com/navamsa-chart-info',
  'headers': {
    'Content-Type': 'application/json',
    'x-api-key': 'YOUR_API_KEY_HERE'
  },
  body: JSON.stringify({
    "year": 2022,
    "month": 8,
    "date": 11,
    "hours": 6,
    "minutes": 0,
    "seconds": 0,
    "latitude": 17.38333,
    "longitude": 78.4666,
    "timezone": 5.5,
    "settings": {
      "observation_point": "topocentric",
      "ayanamsha": "lahiri"
    }
  })

};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

Access to XMLHttpRequest at 'https://json.freeastrologyapi.com/navamsa-chart-info' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Chart.js:119 AxiosErrorcode: "ERR_NETWORK"config: {transitional: {…}, adapter: 'xhr', transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:51521:14)"[[Prototype]]: Error fetchData @ Chart.js:119 json.freeastrologyapi.com/navamsa-chart-info:1 Failed to load resource: net::ERR_FAILED

I tried importing npm request , but that broke my project entirely. I tried using axios, but it's not working. I don't suppose I can somehow use the python react script in my react project.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
  • 2
    `request` is a (deprecated) _nodeJS_ library specifically for that environment. You can't use it on the front-end. – Andy Aug 28 '23 at 19:02

1 Answers1

0

The error that you are getting is a CORS error. The API that you are trying to use i.e. https://json.freeastrologyapi.com/navamsa-chart-info does not allow it, and thus when you are calling it from a React app (my best guess is, that a react web app, running in a browser) it fails.

You can see the CORS test result here

Workaround?

The best suggestion would be to use any intermediary server (maybe your own server or NextJS?) and then call this API from your server.

Tejashwi Kalp Taru
  • 2,994
  • 2
  • 20
  • 35