No 'Access-Control-Allow-Origin' header is present on the requested resource REACT

Question

I hate to ask this question here since there seems to be lots of similar issues and it may be a duplicate. But I have gone through several solutions and they don't seem to work for me. I have a REACT app created using CRA. Its simply a page where I get data from my backend and post it to a different server(not mine). Problem is I keep getting this error when I try to post.

Access to XMLHttpRequest at 'https://testsecureacceptance.cybersource.com/pay' from origin 'https://dev.yyy.xxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I try to disable my chrome security using this and it works fine

google-chrome  --user-data-dir=”/var/tmp/Chrome” --disable-web-security

I have also tried to add CORS headers to the POST request like this but it dint work.I have spent so many hrs on this. I would appreciate any help.

  const headers = {
    "Content-Type": "application/x-www-form-urlencoded",
    "Access-Control-Allow-Origin": "*"
}

js

export default function Absa() {

  const [result, setResult] = useState(null);

  const [checkout, setCheckout] = useState(null);

  const {uuid} = useParams();

  const absa = async () => {
    try{
      let res = await axios.get(`${process.env.REACT_APP_PAYMENT_URL}/signed_data/${uuid}`)

      setResult(res.data);
    } catch (e) {
      console.log(e)
    }
  }
  ;

  useEffect (() =>{
    absa()
  },[])

const qs = require('qs');

  const postData = (e) =>{
    e.preventDefault();
    axios.post('https://testsecureacceptance.cybersource.com/pay',

  qs.stringify({ ...result }),
  
  ).then(response => {

    if (!response.data){
      throw Error("ERROR");  
    }
    let responseHtml = response.data;
    
   //open the new window and write your HTML to it
    var myWindow = window.open("", "response", "resizable=yes");
    myWindow.document.write(responseHtml);
   
  })
  .catch(error => console.log(error));
  
  };