Ошибка Access-Control-Allow-Origin при получении данных из API с помощью Axios (React)

Question

Я получаю «XMLHttpRequest», который не может загрузить https://example.com. Заголовок «Access-Control-Allow-Origin» присутствует на запрашиваемый ресурс. Поэтому исходный код «http://localhost:8000» не допускается ».

Это мой componentenDidMount(), и я использую axios для получения данных из моего API.

componentDidMount() { 
    this.serverRequest = axios.get(this.props.source).then(event =>{  
    this.setState({ 
      title: event.data[0].name 
     }); 
    }); 
} 

Я использую "питон -m SimpleHTTPServer" на терминале, чтобы запустить 'http://localhost:8000'.

Я пользуюсь браузером Chrome, и если я включу плагин Chrome CORS (чтобы включить совместное использование ресурсов Cross-Orig), приложение работает, и я вижу данные, отображаемые из API в DOM. Но я знаю, что использование плагина CORS является плохим, поэтому как я должен официально исправить ошибку Access-Control-Allow-Origin?

С помощью Axios я могу как-то добавить dataType: «jsonp», если это исправить?

Answer 1

Это ограничение, сделанное браузером по соображениям безопасности при попытке доступа к контенту в каком-либо домене из другого домена. Вы преодолеете это, вы должны установить в своем заголовке следующее:

Access-Control-Request-Method 
Access-Control-Request-Headers 

Многие сайты ограничивают CORS. Лучший способ достичь вашей цели - сделать ваш сервер python как прокси. См. Пример.

//Request from the client/browser 

http://localhost:8000/loadsite?q=https%3A%2F%2Fexample.com 

//In your server 

1. Handle the request 
2. Get the query param(url of the website) 
3. Fetch it using your python server 
4. Return the fetching data to the client. 

Это должно сработать.