ПОЛУЧИТЬ запрос на API AWS в React - PullRequest
Новая
       18

ПОЛУЧИТЬ запрос на API AWS в React

0 голосов
/ 30 июня 2018

Я пытаюсь получить доступ к API-интерфейсу AWS через простое приложение реакции, но получаю ошибку CORS. Все, что я хочу сделать, это получить доступ к данным, а затем отобразить их и позволить пользователям организовать их. Когда я подключаю URL-адрес данных в своем браузере, информация отображается идеально.

Мой файл API выглядит так: 

const beerURL = "https://s3.amazonaws.com/....";

//Grab all the data from the API so we can use it in our application
export default {
searchBeer: () => {
   return fetch(beerURL)
 }
}

В моем файле App.js я звоню так: 

import API from "./utils/API";

class App extends Component {

constructor(props) {
  super(props);
  this.state = {
    beer: []
  }
}

componentDidMount() {
  this.loadData();
}

loadData = () => {
  Promise.all([
    API.searchBeer()
  ])
  .then(response => {
    this.setState({ beer: response });
  })

}

render() {
  ...

}

Это то, что мне нужно для настройки сервера CORS? Я не понимаю, почему я должен сделать это для простого запроса GET.

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Этот API представляется разрешающим, отвечая Access-Control-Allow-Origin: *

Я не понял, в чем причина вашей проблемы, но я не думаю, что это просто API выборки.

Вы можете изменить свой код, как показано ниже 

const beerURL = "https://s3.amazonaws.com/....";

fetch(beerURL)
   .then( response => response.json() )
   .then( data => console.log(data) )
0 голосов
/ 02 июля 2018

тот же источник успешен только для запросов на активы того же источника, все другие запросы будут отклонены.

cors будет разрешать запросы ресурсов того же и другого происхождения, которые возвращают соответствующие заголовки COR.

cors-with-принудительно-предварительная проверка всегда выполняет проверку перед проверкой перед выполнением фактического запроса.

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

Чтобы определить режим, добавьте объект параметров в качестве второго параметра в запросе на выборку и определите режим в этом объекте: 

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log('Request successful', text);
  })
  .catch(function(error) {
    log('Request failed', error)
  });
...