2016-01-07 5 views
19

Ho due app uno è un front end reagito e il secondo è l'app rails-api.richiesta patch di recupero non consentita

Ho usato felicemente isomorphic-fetch fino a quando ho avuto bisogno di inviare il metodo PATCH al server.

sto ottenendo:

Fetch API cannot load http://localhost:3000/api/v1/tasks. Method patch is not allowed by Access-Control-Allow-Methods in preflight response. 

ma la risposta OPTIONS dal server include un metodo PATCH in un elenco di Access-Control-Allow-Metodi:

enter image description here

Questo è il modo in il recupero è implementato:

const API_URL = 'http://localhost:3000/'            
const API_PATH = 'api/v1/' 

fetch(API_URL + API_PATH + 'tasks', { 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    method: 'patch',                
    body: JSON.stringify({ task: task })           
}) 

POST, GET, DELETE sono impostati praticamente allo stesso modo e stanno funzionando bene.

Qualche idea di cosa sta succedendo qui?

UPDATE:

Metodo patch è case sensitive:

https://github.com/github/fetch/blob/master/fetch.js#L200

Per non sicuro se questo è destinato o un bug.

UPDATE 2

Questo è destinato e il tipo di metodo PATCH deve essere minuscole. Aggiornamento la linea da prendere metodo:

method: 'PATCH' 

risolve il problema.

https://github.com/github/fetch/issues/254

+0

sembra che ci potrebbe essere un bug in isomorphic-fetch come la richiesta funzionerà se cambierò il nome del metodo in POST ma non è case sensitive per post, get delete .... – Kocur4d

+0

Come nota a margine, l'intestazione per i metodi consentiti in una risposta a un 'OPTIONS 'request è' Allow: '. La tua risposta sta usando un'intestazione diversa ('Access-Control-Allow-Methods:'). – drhining

+0

@drhining mi dispiace non capisco. OPZIONI è usato per scoprire dal server quali richieste sono autorizzate a fare CORS. 'Access-Control-Allow-Methods:' restituisce l'elenco di tutti i metodi consentiti in modo che PATCH sia consentito. Il "problema" è con la libreria fetch stessa ed è spiegato negli aggiornamenti – Kocur4d

risposta

3

Ho avuto un problema molto simile con reactJS front end e Rails API utilizzando Rack :: Cors, e l'aggiunta di patch alla lista dei metodi consentiti risolto il problema per me.

config.middleware.insert_before 0, Rack::Cors do 
    allow do 
    origins '*' 
    resource '*', headers: :any, methods: [:get, :post, :patch, :options] 
    end 
end 
+0

Questa soluzione mi ha aiutato a risolvere il mio problema JavaScript 'fetch' sulla mia pagina in PHP. Ho aggiunto la mia soluzione. – Noitidart

1

Ho avuto questo errore mentre PATCH era tutto maiuscolo. Stavo ricevendo questo errore anche con DELETE e PUT. Ho controllato le intestazioni del mio fetch e ho visto un metodo OPTIONS.Stavo usando il isomorphic-fetch lib qui - https://www.npmjs.com/package/isomorphic-fetch

La correzione per me era da aggiungere alla mia pagina PHP:

<?php 
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH'); 

Senza questo, in Firefox 53 vorrei mantenere ottenere l'errore javascript:

NetworkError when attempting to fetch resource.

l'operazione di recupero che stavo facendo era questo:

try { 
    await fetch('https://my.site.com/', { 
     method: 'PATCH', 
     headers: { 'Content-Type':'application/x-www-form-urlencoded' }, 
     body: 'id=12&day=1' 
    }); 
} catch(ex) { 
    console.error('ex:', ex); 
}