12

ユーザーがng-file-upload.txtを使用してサーバーにファイルをアップロードできる AngularJs を使用して Web アプリを作成しました。

ここで、単純な Node.js サーバーでアップロード部分をテストし、ページの進行状況バーとエラー メッセージがどのように動作するかを確認したいと考えていましたが、Node.js とバックエンド全体がどのように機能するかについての知識が非常に乏しいため、ng-file-uploadの非常にwikiによって提供される Node.js サーバー。

このapp.jsファイルに私をもたらしたいくつかの変更を加えようとしました:

var http = require('http')
  , util = require('util')
  , multiparty = require('multiparty')
  , PORT = process.env.PORT || 27372

var server = http.createServer(function(req, res) {
  if (req.url === '/') {
    res.writeHead(200, {'content-type': 'text/html'});
    res.end(
      '<form action="/upload" enctype="multipart/form-data" method="post">'+
      '<input type="text" name="title"><br>'+
      '<input type="file" name="upload" multiple="multiple"><br>'+
      '<input type="submit" value="Upload">'+
      '</form>'
    );
  } else if (req.url === '/upload') {
    var form = new multiparty.Form();

    form.parse(req, function(err, fields, files) {
      if (err) {
        res.writeHead(400, {'content-type': 'text/plain'});
        res.end("invalid request: " + err.message);
        return;
      }
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received fields:\n\n '+util.inspect(fields));
      res.write('\n\n');
      res.end('received files:\n\n '+util.inspect(files));
    });
  } else {
    res.writeHead(404, {'content-type': 'text/plain'});
    res.end('404');
  }
});
server.listen(PORT, function() {
  console.info('listening on http://127.0.0.1:'+PORT+'/');
});

UserController.jsはこのように単純です

UserController = function() {};

UserController.prototype.uploadFile = function(req, res) {
    // We are able to access req.files.file thanks to 
    // the multiparty middleware
    var file = req.files.file;
    console.log(file.name);
    console.log(file.type);
}

module.exports = new UserController();

AngularJs アプリのディレクティブのコントローラー内で、この方法でng-file-upload アップロード サービスを使用します

var upload = Upload.upload({
    url: 'http://127.0.0.1:27372/upload',
    method: 'POST',
    fields: newFields,
    file: newFile  
    }).progress(function (evt) {
        $scope.progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
    }).success(function (data, status, headers, config) {
        console.log("OK");
    }).error(function(data, status, headers, config) {
        console.log("KO");
});

最後に、次のようにサーバーを起動します。

node app.js

そしてすべてがうまく見えます：

listening on http://127.0.0.1:27372

以上のことから、AngularJs Web アプリを起動してファイルをアップロードしようとすると、次のエラーが表示されます。

OPTIONS http://127.0.0.1:27372/upload 400 (Bad Request)                                   angular.js:10514
XMLHttpRequest cannot load http://127.0.0.1:27372/upload. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 400.                   (index):1

いくつかのグーグル検索の後、このような CORS リクエストを許可するために使用される多くの要点が見つかりましたが、Node.js の知識が乏しいため、これらのコード行をどこに配置すればよいかさえわかりません。

さらに、パーツ自体に a を取得しようとしたconsole.log(err)ところapp.js form.parse、端末に次のように出力されました。

DEBUG SERVER: err =
{ [Error: missing content-type header] status: 415, statusCode: 415 }

この単純な Node.js サーバーを機能させるには何が足りないのでしょうか?

編集 29/07/2015

@Can Guney Aksakalliによって提案された最初のオプションに従うことにしましたが、それが私ができる唯一のオプションですが、コードが次のようになっている場合でも:

var server = http.createServer(function(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  if (req.url === '/') {
    res.writeHead(200, {'Content-type': 'text/html'});
// and the code stays the same

この解決策は機能していません。node app.js最初の質問の最後の部分で書いたように、Chrome コンソールと を呼び出した端末の両方で同じエラー メッセージが表示され続けます。

4

2 に答える 2