redux isomorphic fetch Access-Control-Allow-Origin

Question

Я написал приложение redux, которое я запускаю локально с помощью webpack-dev-сервера. (порт 8080). Я пытаюсь подключиться к веб-сервиса, который работает локально на порту 9000.

Мой код для подключения к веб-сервиса следующим

return fetch(`http://localhost:9000/movies/${dimensionName.toLowerCase()}list`) 
    .then(response => response.json()) 
    .then(json => 
    dispatch(receivedDimensionAttributesSuccess(dimensionName, json)) 
) 
    .catch(error => 
    dispatch(receivedDimensionAttributesError(dimensionName, error)) 
); 

Это получает ошибку

Fetch API cannot load http://localhost:9000/movies/yearlist. No 'Access- 
Control-Allow-Origin' header is present on the requested resource. Origin 
'http://localhost:8080' 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. 

Я гугл для этой проблемы и нашел эту нить

Access Control Allow Origin header not present with fetch api call

, но мне не нравится решение, связанное с переходом на другую библиотеку/промежуточное программное обеспечение.

Как я могу решить проблему с изоморфной библиотекой выборки.

Answer 1

Вы можете прочитать https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch

fetch(url[, init])

установить инициализации параметров для Разрешать запрос Междоменные

попробовать

Answer 2

Access-Control-Allow-Origin является то, что вы можете контролировать на стороне клиента. Это ограничение безопасности для браузеров, которое требует согласования с сервером.

Сервер может извлекать данные из любой конечной точки, но для приложений браузера это другое. По соображениям безопасности вам разрешено загружать данные только через XHR с того же сервера, на который вы загрузили веб-страницу. Если вам нужно загрузить данные с другого сервера (скажем, внешний API), браузер требует, чтобы сервер ответил, что вы разрешены.

См описание в разделе "Запрос Междоменное" на http://www.acuriousanimal.com/2011/01/27/working-with-the-javascript-xmlhttprequest-object.html

Answer 3

look at me,this works

вы должны использовать

let header = new Headers({ 
     'Access-Control-Allow-Origin':'*', 
     'Content-Type': 'multipart/form-data' 
}); 

вместо

let defaultOptions = { 
    url:'', 
    method:'POST', 
    mode: 'cors', 
    headers:{ 
     'Access-Control-Allow-Origin':'*' 
    }, 
    body:null, 
}; 

для включения CORS

Answer 4

вы можете просто добавить {mode:'no-cors',}, чтобы отключить заголовок No 'Access- Control-Allow-Origin'. Для получения дополнительной информации вы можете обратиться по следующему адресу:

https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api

return fetch(`http://localhost:9000/movies/${dimensionName.toLowerCase()}list`**,{mode:'no-cors'**,}) 
    .then(response => response.json())