Связь с API - redux

Question

Я строю проект с реагированием и сокращением, но я не могу соединиться с моим API. у меня есть это,

componentDidMount() { 
    const {dispatch} = this.props; 
    dispatch(fetchByQuerystring()); 
} 

и fetchByQuerystring является:

export function fetchByQuerystring() { 
    return function(dispatch) { 

     return fetch(`http://my_domain.dev/api`) 
      .then(response => response.json()) 
      .then(json => dispatch(receiveByQuerystring(json))); 
    } 
} 

Когда я бегу, я получаю эту ошибку:

Fetch API cannot load http://my-domain.dev/api . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Как я могу решить эту проблему?

Answer 1

Когда вы находитесь на сайте A и вызываете (с запросами ajax) другой сервер B (different port, different domain name/ip address or different protocol), браузер ожидает, что B явно разрешит A. Это делается с заголовками ответов HTTP, добавленными сервером B (и поддержкой OPTIONS), см. CORS (Cross-Origin Resource Sharing).

Если вы должны иметь возможность вызывать свой API с других серверов в производстве, добавление CORS support in laravel - хорошая идея. Не добавляйте их, если они вам не нужны.

Если API вызовы simple enough и don't require cookies, вы можете настроить локальную Apache просто add the headerAccess-Control-Allow-Origin: *.

В противном случае вы должны обслуживать оба ресурса (API и интерфейс взаимодействия) от одного и того же источника.

Answer 2

Вы должны были бы установить заголовки CORS на локальном веб-сервере, который работает HTTP: /my-domain.dev/api

Headers отправить: Access-Control-Allow-Origin: http://my-domain.dev/api

Это может помочь для Laravel github.com/barryvdh/laravel-cors