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（或者就此问题发布）。

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

Answer 1

我将根据您的措辞假设您正在使用某种简单的HTTP服务器（或根本没有服务器）进行本地开发，list.json是您计算机上的文件。如果是这种情况，那么您的问题是您的HTTP服务器没有路由知道如何处理PUT s（或POST s，或者可能是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上的其他地方复制了它，它完全有效。

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

React JS + React Router使用$ .get而不是$ .ajax PUT

3 个答案: