Can't get data from cards against humanity api with getJSON

Question

I used the following code:

import { Link, withRouter } from 'react-router-dom';
import { useState, useEffect } from 'react';
import $ from 'jquery';

export default withRouter(function Game() {
const [pack, setPack] = useState(null);
const [blackCards,setBlackCards] = useState([]);
const [whiteCards,setWhiteCards] = useState([]);

useEffect(function() {
    setPack(null);
    const $xhr = $.getJSON('https://cah.greencoaststudios.com/api/v1/        ', setPack);
    return function abort() {
      $xhr.abort();
    }
  }, []);

  //setWhiteCards(pack.white);
  //setBlackCards(pack.black);

  return (
      <div>
        <p>{pack ? "no": "yes"}</p>
        <p>white cards:</p>
        <p>black cards:</p>
      </div>
  );
});

to bring data from https://cah.greencoaststudios.com/ and I get NO data and the following note:

Failed to load https://cah.greencoaststudios.com/api/v1/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

What can I do?

Answer 1

This is not a problem with your code, but a restriction on the server you are trying to access. As the response indicates, the server does not allow cross-origin access.

What can I do?

Essentially nothing, except ask the developer of the API to add your domain (live, not localhost) to the allowed origins, or use a proxy server of your own.