web-dev-qa-db-ja.com

パッチリクエストの取得は許可されていません

2つのアプリがあり、1つはリアクションフロントエンドで、もう1つはRails-apiアプリです。

PATCHメソッドをサーバーに送信する必要があるまで、私は喜んで isomorphic-fetch を使用しています。

私は得ています：

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

ただし、サーバーからのOPTIONS応答には、Access-Control-Allow-MethodsのリストにPATCHメソッドが含まれています。

enter image description here

これは、フェッチの実装方法です。

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はほぼ同じように設定され、正常に機能しています。

ここで何が起こっているのでしょうか？

UPDATE：

メソッドパッチでは大文字と小文字が区別されます。

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

これが意図されているのか、バグなのかはわかりません。

更新2

これは意図的なものであり、メソッドタイプPATCHは大文字と小文字を区別する必要があります。 fetchメソッドから次の行を更新します：

method: 'PATCH'

問題を修正します。

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

javascriptphpruby-on-railsfetch-api
32
Kocur4d

反応するJSフロントエンドとRack :: Corsを使用したRails API）で非常に似た問題があり、許可されたメソッドのリストにpatchを追加すると問題が解決しました。

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

PATCHがすべて大文字のときにこのエラーが発生しました。 DELETEとPUTでもこのエラーが発生していました。 fetchのヘッダーを確認し、OPTIONSメソッドを見つけました。ここでisomorphic-fetch libを使用していました- https://www.npmjs.com/package/isomorphic-fetch

私の修正は、PHPページに追加することでした：

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

これがなければ、Firefox 53ではjavascriptエラーが発生し続けます：

リソースを取得しようとしたときのNetworkError。

私がやっていたフェッチはこれでした：

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);
}
1
Noitidart

このコードを使用してください_ method： 'PATCH'

return (
        fetch(API_ROOT + route, {
            _method: 'PATCH',
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                'Authorization': ''
            },
            data: JSON.stringify(data),
            credentials: 'include'
        })
        .then(res => res.json())
        .then(res => {
            return res
        })
        .catch(err => console.error(err))
    );

別の方法ヘッダーにメソッドを挿入

headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            '_method': 'PATCH',
            'Authorization': ''
        }

それはあなたを助けます

return (
        fetch(API_ROOT + route, {
            method: 'POST',
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                '_method': 'PATCH',
                'Authorization': ''
            },
            data: JSON.stringify(data)
        })
        .then(res => res.json())
        .then(res => {
            console.log(res);
            return res
        })
        .catch(err => console.error(err))
    );
0
YoJey Thilipan