不允许获取补丁请求

php javascript fetch-api ruby-on-rails

2022-08-30 09:37:49

我有两个应用程序，一个是react前端，第二个是rails-api应用程序。

我一直很高兴使用同构获取，直到我需要将PATCH方法发送到服务器。

我得到：

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

但是来自服务器的 OPTIONS 响应在访问控制允许方法列表中包含一个 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

答案 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

答案 2

我有这个错误，而都是大写的。我也得到了这个错误和。我检查了我的标题，我看到了一个方法。我在这里使用lib - https://www.npmjs.com/package/isomorphic-fetchPATCHDELETEPUTfetchOPTIONSisomorphic-fetch

我的修复是添加到我的PHP页面：

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

如果没有这个，在Firefox 53中，我会继续得到javascript错误：

尝试获取资源时的网络错误。

我正在做的抓取是这样的：

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