使用React前端进行AJAX调用时，无法使用CORS访问后端API

Question

I am trying create an application that grabs external API information through the backend and passes it to my React frontend. The Backend works fine, i can make calls to the server and i get the information. However when i try to pass the Information to my front end i get errors. If someone could tell me what i did wrong that would be greatly appreciated. i've been having this issue all weekend.

backend controller:

url:

However when i make an AJAX call through the react front end i get this error:

Backend error:

Here is the rest of my code:

Rails: CORS and Application controller:

Rails Routes:

React Component w/ AJAX call:

Answer 1

This is CORS error. Your server should respond on OPTIONS request with some data which will satisfy browser when you performing call from one domain (where your frontend hosted) to another domain (where your server at).

Check MDN for more info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS