React JS + React Routerは$ .getではなく$ .ajaxで動作します。PUT

Question

react.jsセットアップがあり、リアクションルータを使用した簡単なルートがあります。私は、ディスパッチャを持っている：

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と一緒に動作する理由と混乱しています。

私は反応しているファイルにデータを保存することに苦労していますが、これは当初のように思えましたが、今はあまりよく分かりません。私がここで間違っていることはありますか？

Answer 1

私はあなたがローカルで開発するための簡単なHTTPサーバのいくつかの並べ替え（あるいはまったくサーバ）を使用していることを、あなたのフレージングに基づいて仮定するつもりだ、とlist.jsonはあなたのマシン上のファイルであります。この場合、HTTPサーバーにはPUT（またはPOST）の処理方法や、おそらくGET以外の方法を扱う方法がわからないという問題があります。あなたのシステムにファイルを書きたい場合は、PUTを扱うことができる実際のバックエンドを追加し、ファイルシステムとより知的に対話する必要があります。

は、残念ながら、（セキュリティ上の理由のため）だけで、ブラウザでファイルをディスクに書き込むための簡単な方法はありませんが、あなたがあなたのバックエンドに追加しないようにしたい場合は、ダウンロードusing a Blob

Answer 2

ajaxリクエストのみを使用して、サーバー上のファイルの内容をブラウザから変更することはできません。私があなたのサーバー上のファイルをajaxリクエストを送信するだけで変更できるかどうかは、インターネットがどのように危険にさらされているかを考えてください。

このような要求を処理できるサーバーサイドコードが必要になります。たとえば、組み込みのfsモジュールを使用して、ディスクへの読み書きを処理できるルートを持つ単純なノード/エクスプレスサーバーをセットアップできます。

おそらく後でデータベースを使用したいと思うかもしれません。

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

Answer 3

用のファイルを作成するに見ることができることを確認してくださいサーバーはGETだけでなく、PUT要求をルーティングします。

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

一部のブラウザ（クローム）PUT/DELETE要求を行う能力を制限：たとえば は、このようなルートがexpress.js。 PUTメソッド、 第二部の前方へのアクセス（書き換え）OPTIONメソッド要求を受け入れる

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] 

最初の部分：それはあなたが何をしたいのか404を返すOPTION要求があなたの.htaccessファイルでこれを入れているうちsents 200応答。このコード私はどこか他のstackoverflow上にコピーし、それは完全に動作します。

（この回答は完全に動作します。）