React JS + React Router 适用于 $.get 但不适用于 $.ajax PUT

Question

我有一个 react.js 设置，我有一些使用 react-router 的简单路由。我有一个调度员：

import dispatcher from "../dispatcher";

export function reloadList(){
    dispatcher.dispatch({type: "FETCH_LIST"});
    let serverRequest = $.get("../../data/list.json", 
        function(data){
            console.log(data); //Logs correct data from list.json
        }
    );
}

export function saveList(list){
    dispatcher.dispatch({type: "SAVE_LIST"});
    let serverRequest = 
       $.ajax(
         url: "../../data/list.json",
         dataType: 'json',
         method: 'PUT',
         data: list,
         success: function(data) {
             console.log("success!");   //does not output
         },
         error: function(xhr, status, err) {
           console.log(status, err.toString());  //outputs a 404 error
         }
       });
  )
}

reloadList() 函数运行良好并输出 JSON 数据。 saveList() 函数会引发 404 错误。我假设这是因为应用程序处理路由的方式，但我很困惑为什么它适用于 get 而不是 put（或 post）。

我一直在努力将数据保存到响应文件中，起初这似乎是正确的方法，但现在我不太确定。我在这里做错了吗？

Answer 1

我将根据您的措辞假设您正在使用某种简单的 HTTP 服务器（或根本没有服务器）进行本地开发，而 list.json 是您机器上的一个文件。如果是这种情况，您的问题是您的 HTTP 服务器没有路由知道如何处理PUTs（或POSTs，或者可能是GET 以外的任何方法）。如果您想将文件写入您的系统，您需要添加一个可以处理PUT 并更智能地与文件系统交互的实际后端。

不幸的是，没有简单的方法可以单独在浏览器中将文件写入磁盘（出于安全原因），但如果您想避免添加到后端，您可以考虑创建文件以供下载using a Blob

Answer 2

您不能仅使用 ajax 请求从浏览器更改服务器上文件的内容。想想如果我可以通过发送 ajax 请求来更改你的服务器上的文件，那么互联网会有多么不安全。

您将需要一些可以处理此类请求的服务器端代码。例如，您可以使用内置的 fs 模块设置一个简单的 Node / Express 服务器，该服务器具有可以处理磁盘读取和写入的路由。

也许稍后您会想要使用数据库。

http://expressjs.com/en/starter/installing.html

Answer 3

确保您的服务器路由 PUT 请求，而不仅仅是 GET。 例如 express.js 路由是这样的：

   `app.get("/getRequestHere",function(){});
    app.put("/putRequestHere",function(){});`

某些浏览器 (Chrome) 限制发出 PUT/DELETE 请求的能力。它发出一个返回 404 的 OPTION 请求。你要做的就是把它放在你的 .htaccess 文件中：

    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Max-Age "1000"
    Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token, accessToken"
    # Added a rewrite to respond with a 200 SUCCESS on every OPTIONS request.
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]

第一部分接受 PUT 方法的访问， 第二部分将 OPTION 方法请求转发（重写）为 200 响应。这段代码是我在 stackoverflow 上的其他地方复制的，它完全可以工作。

（停止投票给我。这个答案完全有效）