reactjs - How to change the access control allow origin to url api in react

Question

How to change the access control allow origin to url api, cause every time I load the page I'm getting an error which is the error 500.

When I login I added this code

 const options = {
          headers: {
            'Content-Type': 'application/json',
          }
        }

Axios.post("/auth", payload, options).then(function (response: AxiosResponse) { ....}

then I create a service for calling api.

api

function useApi() {

    const creds = useCredentials();

    Axios.defaults.baseURL = serverConfig[creds.server].api;

    return {
        get: (id: string) => Axios.get(`${API_URL}/${id}`),
        getAll: (params?: object) => Axios.get(API_URL + (params ? getQueryParams(params) : '')),
        getLatest: () => Axios.get(`${API_URL}/latest`)
    };
}

export default useApi;

But when I call the getLatest on my index.tsx which is like this

function Home() {

const [state, setState] = useState([]);
const { getLatest } = useApi();
const PARAMS = { length: '12' }

useEffect(() => {
getAll(PARAMS).then(async (response) => setRowData(response['data'].data));
}, []);

return (<></>);
}

then the error is the photo above.

question from:https://stackoverflow.com/questions/65838595/how-to-change-the-access-control-allow-origin-to-url-api-in-react

Answer 1

As I can see in your picture, your API is response 500, this status code throw when your server is stuck and error, not about CORS.

A little bit about CORS:

• Not relevant for React.js. Let's check and disable CORS on your server.

• Or you can consider disabling CORS temporary for development purpose by adding prefix: https://cors-anywhere.herokuapp.com/${YOUR_URL_API}