PUTメソッドが機能しない（Express＆Angular）

Question

MEANスタックでREST APIとクライアント側フレームワークを作成しました。 ローカルで作業した後、私はHerokuでAPIをデプロイしました。

app.use('*', function(req, res, next){ 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    if(req.method === "OPTIONS") { 
    res.header("Acces-Control-Allow-Methods", "GET, PUT, POST, DELETE"); 
    return res.status(200).json({}); 
    } 
    next(); 
}); 

をクライアント側では、私はREQヘッダを扱っ：CORSが動作する必要があるように私のエクスプレスのルートでは、私はres.headersを扱う

app.factory('dataServices', function($http) { 
    return { 
    //Get the location information from API 
    getAll: function() { 
     return $http({ 
     method: 'GET', 
     url: url 
     }) 
    }, 

    get: function(id) { 
     return $http({ 
     method: 'GET', 
     url: url + '/' + id 
     }) 
    }, 
    post: function(id) { 
     return $http({ 
     method: "POST", 
     url: url, 
     data: {} 
     }) 
    }, 
    put: function(id, data) { 
     return $http({ 
     method: "PUT", 
     url: url + '/' + id, 
     headers: { 
      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept", 
      "Access-Control-Allow-Method": "PUT", 
      "Content-Type": "application/json charset=UTF-8" 
     }, 
     data: data 
     }) 
    }, 

私がGETまたはPOSTリクエストをトリガする場合問題ありません。私はPUTをトリガーまたはメソッドDELETEしようとすると、しかし：

$scope.saveLocation = function(id) { 
    console.log(id) 
    dataServices.put(id).then(function successCallback(repsonse) { 
     $scope.customer = response.data; 
    }) 
    }; 

を私は私のコンソールで次のエラーを取得する：

XMLHttpRequest cannot load https://bbsalesapi.herokuapp.com/locations/580fd2a672e68a000352783a. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response. 

私は別のHTTPメソッドの詳細を読み取ろうとしましたが、私はできませんなぜそれが機能していないのか理解してください。誰かが私にこの1つを助けることができますか？

Answer 1

私は通常、ミドルウェアで、それは私の作品の広告... CORSのものを置く：

// middleware 
var handleCORS = function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type'); 
    next(); 
} 

// ... 

app.configure(function() { 
    app.use(express.bodyParser()); 
    app.use(express.cookieParser()); 
    app.use(express.session({ secret: 'my super secret' })); 
    app.use(express.methodOverride()); 
    app.use(handleCORS); 
    app.use(app.router); 
    app.use(express.static(__dirname + '/public')); 
}); 

Answer 2

使用corsライブラリを、それが問題PUT要求に対して npm install cors --save

var cors = require('cors'); 

app.use(cors()) 

Answer 3

を解決しますContent-Lengthヘッダーを設定することは必須です。
また、コンテンツタイプに問題があります。忘れました。

put: function(id, data) { 
    return $http({ 
    method: "PUT", 
    url: url + '/' + id, 
    headers: { 
     "Access-Control-Allow-Origin": "*", 
     "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept", 
     "Access-Control-Allow-Method": "PUT", 
     "Content-Type": "application/json; charset=UTF-8", 
     "Content-Length": Buffer.byteLength(data) 
    }, 
    data: data 
    }) 
},