I am using axios to fetch some data from the API that include XML Data. My API call working in Postman but in reactjs, it throws error like No ‘Access-Control-Allow-Origin’ header is present on the requested resource. I tried to put ‘Access-Control-Allow-Credentials’:true to headers.But it doesn’t work.Take a look at my code also

import axios from "axios";
import React, { useEffect } from "react";
const convert = require("xml-js");

export default function DailyNews() {
  useEffect(() => {
    axios
      .get("https://www.tcmb.gov.tr/kurlar/today.xml")
      .then(function (response) {
        console.log(response); // this will print xml data structure
        const data = JSON.parse(
          convert.xml2json(response.data, { compact: true, spaces: 2 })
        );
        console.log(data);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
  }, []);

  return (
    <div>
      <h1>XML CALISMASI</h1>
    </div>
  );
}

>Solution :

Your code is throwing an error because your domain is not whitelisted on their site, which means that you can’t just query their URL and use it, then your browser will see it as a security violation. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

That being said CORS is only a browser thing, you can still query that API yourself and then call your own server API from your client, as long as it’s your server making the call to their API and then passing along the data to your client.