Verbindung mit API - redux

Question

Ich baue ein Projekt mit reagieren und redux, aber ich kann nicht mit meinem API verbinden. Ich habe diese,

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

und fetchByQuerystring ist:

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

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

Wenn ich es laufen, bekomme ich diesen Fehler:

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.

Wie kann ich dieses Problem lösen?

Answer 1

Wenn Sie auf einer Site A sind und einen anderen Server B (different port, different domain name/ip address or different protocol) anrufen (mit Ajax-Anfragen), erwartet der Browser, dass B explizit erlaubt. Dies geschieht mit HTTP-Antwort-Headern, die vom Server B hinzugefügt wurden (und OPTIONS Unterstützung). siehe CORS (Cross-Origin Resource Sharing).

Wenn Sie Ihre API von anderen Servern in der Produktion aufrufen können, ist das Hinzufügen CORS support in laravel eine gute Idee. Fügen Sie sie nicht hinzu, wenn Sie sie nicht brauchen.

Wenn Ihr API-Aufrufe sind simple enough und don't require cookies, können Sie Ihre lokale Apache so konfigurieren, dass nur add the headerAccess-Control-Allow-Origin: *.

Andernfalls sollten Sie beide Ressourcen (API und reagierendes Frontend) vom selben Ursprung bedienen.

Answer 2

Sie müssten CORS-Header auf dem lokalen Webserver setzen, die http läuft: /my-domain.dev/api

Header zu senden: Access-Control-Allow-Origin: http://my-domain.dev/api

Diese für Laravel helfen kann github.com/barryvdh/laravel-cors