2016-10-12 17 views
7

Im tu czegoś brakuje. Próbowałem uzyskać wywołanie funkcji API. Następnie dzielę adres URL jak poniżej i działa, dosłownie raz. po tym nie udało się ponownie. Przysięgam, że czegoś nie zmieniłem.Axios - nie ma nagłówka "Access-Control-Allow-Origin" jest obecny

Jak sobie z tym radzić w AXIOS?

Komunikat o błędzie jest
XMLHttpRequest cannot load http://magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/?spot_id=228. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

import axios from 'axios'; 

const ROOT_URL = `magicseaweed.com/api/W2Z26fXscpELi7nPB0svfqcGj9FtGO9e/forecast/`; 

export const FETCH_WEATHER = 'FETCH_WEATHER'; 

export function fetchWeather() { 
    const url = `http://${ROOT_URL}?spot_id=228`; 
    const request = axios.get(url); 

    return { 
     type: FETCH_WEATHER, 
     payload: request 
    }; 
} 

Próbowałem z tym zmodyfikowanym GET aswell, ale bezskutecznie

axios({ 
    url: url , 
    headers: {"Access-Control-Allow-Origin": "*"}, 
}); 
+0

Możliwy duplikat [Nie „Access-Control-Allow -Origin 'nagłówek jest obecny na żądanym zasobie. Pochodzenie "..." nie jest więc dozwolone.] (Http://stackoverflow.com/questions/20433655/no-access-control-allow-origin-header-is-present-on-test-requested-resource-or). Jest to bardzo powszechne pytanie i nie ma nic wspólnego z redux. Post nawiązywał do odpowiedzi na twoje pytanie, ale mogą być lepsze. –

+0

Okay, fair point. ale patrząc na dokumentację 'axios', nie udało mi się zobaczyć, jak to skonfigurować. Wypróbowałem kilka innych opcji, ale nie zadziałało. Wymienię to – morne

+0

Jest to coś, do czego serwer musi być skonfigurowany. Nadal możesz wywoływać magiczne wodorosty, jeśli skonfigurujesz projekt na serwerze, jak mówi odpowiedź. –

Odpowiedz

1

Spójrz tutaj:

https://www.npmjs.com/package/magicseaweed

W dolnej części znajduje się wyjaśnienie, dlaczego ich wrapper API nie działa w przeglądarce. Z tego samego powodu nie można wykonać połączenia Ajax w przeglądarce.

FAQ

Czy mogę używać tego modułu w przeglądarce z browserify?

W teorii tak, ale API Magicseaweed obecnie nie wysyła nagłówka Access-Control-Allow-Origin w żądaniach przeglądarki (w jakiś sposób nagłówek jest wysyłany, jeśli powtórzysz żądanie przez cURL).

Jeśli więc interfejs API zmieni to zachowanie, ten moduł będzie działał z funkcją przeglądania.

Można wstać własny serwer proxy lub użyć jednego z wolnych te dostępne w internecie:

https://developer.yahoo.com/yql/

https://crossorigin.me/

+0

Dzięki Robert. Będę czytać – morne

+1

Próbuję wywoływać to samodzielnie i mogę potwierdzić, że API nie zwraca nagłówka Access-Control-Allow-Origin, więc nie będzie działać z AJAX. Btw, to axios, nie przeglądajmy :) Edit: przepraszam, widziałem, że mówią to samo na swojej stronie npm, dlatego powiedziałeś, że przeglądaj :) –

Powiązane problemy