javascript - 不允许获取补丁请求

Question

我有两个应用程序，一个是反应前端，第二个是 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 方法：

这是实现获取的方式：

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 的设置几乎相同，并且工作正常。

知道这里发生了什么吗？

更新：

方法补丁区分大小写：

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

不确定这是有意的还是错误的。

更新 2

这是有意的，方法类型 PATCH 需要区分大小写。将 fetch 方法中的行更新为：

method: 'PATCH'

解决问题。

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

Answer 1

我在使用 Rack::Cors 的 reactJS 前端和 rails API 方面遇到了非常相似的问题，添加patch到允许的方法列表中解决了我的问题。

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

Answer 2

使用此代码 _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))
    );

Answer 3

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