For external API call, the remote server may contain no ‘Access-Control-Allow-Origin’ header on its requested resources. So it could be almost impossible for it to call this kind of external API in react. You can try proxy if you are aware of the domain of the remote server.

So, we should make everything included in the returned Json instead of calling thru frontend. No proxy library is needed, but normal Python Requests is requested. And I guess it is just much easier to process data and call external API in backend.

We got a lot of misleading approaches for this issue.

Wrong approach:

1. Npm http-proxy
2. Django http proxy

Reference:

Hi James, I got a almost same react problem as this stack overflow issue (https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input) except the API I call in this case is external (http://www.snap21.com/api/v1/reviews?orgId=1) instead of from the django app.

According to the solutions provided by the best answer, the best way to solve Access-Control-Allow-Origin problem would be to configure the http://localhost:8080 server to send the Access-Control-Allow-Origin response header and to handle the OPTIONS request. Certainly I can do this in django settings for internal API calls, but how could I make the external server send the Access-Control-Allow-Origin response header when it is called in react app? (axios is not allowed I suppose.)

Do you have any ideas about this issue?