2016-07-20 2 views
0

искал во всем для решения этой проблемы:Access-Control-Allow-Origin при использовании API

Fetch API не может загрузить https://api.wunderground.com/api/ ******/условия/д/Торонто. Заголовок заголовка «Access-Control-Allow-Origin» имеет значение «http://www.wunderground.com», которое не соответствует заданному началу. Происхождение 'http://localhost:3000', следовательно, не допускается. Попросите сервер отправить заголовок с допустимым значением или, если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors» для извлечения ресурса с отключенным CORS.

const apiKey = '******' 
const apiUrl = 'https://api.wunderground.com/api/' + apiKey + '/conditions/q/' 

var WeatherApi = { 
    get: function(query) { 
    return fetch(apiUrl + query).then(function(response) { 
     return response.json(); 
    }); 
    } 
}; 

    handleClick: function() { 
    WeatherApi.get(this.state.text).then(function(data) { 
     console.log(data); 
    }.bind(this)); 
    }, 

Итак, как мне отправить сервер с допустимым значением?

+0

См http://stackoverflow.com/questions/10518913/trying-to-search-wunderground-locations-with-javascript-jquery-and- html – matmo

+0

Он настроен на http://www.wunderground.com специально, чтобы разрешить этот домен, вы уверены, что это публичный api? –

+0

Я уверен, что это публичный api. Я получил URL-адрес из своих документов: https://www.wunderground.com/weather/api/d/docs – Banner

ответ

0

Эти запросы «CORS» отключаются от глагола OPTIONS, отправляемого браузером, сервером и сервером, разрешающим Cross-Origin-Requests. Хотя, в зависимости от API, вы можете преодолеть ограничение CORS, помните, что браузер жалуется, если вы можете сделать одну и ту же сторону сервера вызовов, у вас не будет проблемы (по крайней мере, на уровне браузера API может по-прежнему требовать некоторые заголовки).

Если вы ДОЛЖНЫ сделать это в браузере, вам необходимо следовать строгим правилам, которые ваш потребительский API также должен поддерживать, чтобы разрешить доступ. В RFC ниже описывается весь протокол глаголов OPTIONS (называемый предполетным в RFC), и вы всегда можете увидеть их в Chrome. инструменты и использовать их для отладки проблемы.

Скорее всего, ваш API ожидает некоторый токен или, может быть, заголовок dev. (Localhost issue), который вы не поставляете.

Вот ссылка RFC. Раздел 5.x является Gem вы хотите, чтобы убедиться, что вы читали все в этом разделе ...

https://www.w3.org/TR/cors/#syntax

Надеется, что это помогает

Edit 1

На локальном поле DEV, в IIS или Apache, убедитесь, что поставить вас в «заголовок ответа»

Access-Control-Allow-Origin ---> "https://api.wunderground.com" 
+0

Он не управляет сервером, на котором работает API, просто fyi. – matmo