Express ServerへのJSON配列データを使用したAngularJS POST要求

Question

静的なAngularJS Webサイトと異なるドメインで動作するExpressサーバーがあります。サイトは、ファイル名をパラメータとしてGET要求をサーバーに送信します。次に、サーバーはS3バケットからファイルを要求し、S3バケットは「バイナリ/オクテットストリーム」を「Content-Type」として送信します。データを解読し、同じ「Content-Type」でサイトに送り返し、ファイルをダウンロードします。これはすべて単一のファイル要求に対してはうまくいきますが、サーバーに一度にファイル名の配列を送信し、複数のファイルをダウンロードできるようにしたいと考えています。 JSON配列としてファイル名を送信しようとしましたが、エラーが発生します。

XMLHttpRequestはhttp://localhost:3000/decryptをロードできません。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。 Origin 'file：//'はアクセスが許可されていません。

私のサーバーコンソールでは、要求はPOSTの代わりにOPTIONSとして表示されます。私はAccess-Control-Allow-Origin: *を私の応答ヘッダーに必ず含めています。これを解決するにはどうすればいいですか？

UPDATE：
私は私のルータ上で次のミドルウェアを追加することにより、CORSのエラーを解決することができた：

function allowCrossDomain(req, res, next) { 
    if ('OPTIONS' == req.method) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With'); 
    res.status(200).end(); 
    } 
    else { 
    next(); 
    } 
} 

しかし、私はまだのために（複数を送信するかどうかはわかりません各ファイル）の "バイナリ/オクテットストリーム"をレスポンスに追加し、静的サイトのファイルとしてダウンロードします。現在、私はangular-file-saverを使用して、単一の要求からファイルを保存しています。

Answer 1

あなたのサーバーでいくつかのことをする必要があります。まず、multerとbodyParserを使用していますか？ Multerは、ポストコールを追加できるようになり、データの受け渡しを処理します。

まずAngularJS投稿：

は

$http.post(baseUrl + "mypostmethod", o) //o is your object 
     .then(function successCallback(resp) { 
      console.log(resp) 
     }, function errorCallback(resp) { 
      console.log(resp) 
     }); 

今すぐあなたのnodejs expressセットアップのためとして、あなたはすべての適切なモジュールを使用していることを確認します。ほとんどのプロジェクトで使用している基本的なリストを提供します。また、*の代わりにreq.headers.originを使用すると、Access-Control-Allow-Originエラーが発生しなくなりました。

NodeJS：

var express = require('express'), 
fs = require('fs'), 
spdy = require('spdy'), 
bodyParser = require('body-parser'), 
multer = require('multer'), 
helmet = require('helmet'), 
upload = multer(), // this will allow you to pass your object into your post call with express 
path = require('path'), 
cookieParser = require('cookie-parser'), 
request = require('request'), 
app = express(), 
http = require('http'), 
formidable = require('formidable'); //Good for handling file uploads 

app.use(helmet()); 
app.use(cookieParser()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true 
})); 
app.use(function(req, res, next) { 
    res.header('Access-Control-Allow-Credentials', true); 
    res.header('Access-Control-Allow-Origin', req.headers.origin); 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH'); 
    res.header('Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'); 
    next(); 
}); 

これらは、私はほとんどすべての私のプログラムで使用する基本的なものです。 expressで最も重要なのは、bodyParserとmulterです。これらは、取得と投稿を正しく使用できるためです。ここで

はポストNodeJSの例です。この記事で

app.post('/mypostmethod', upload.array(), function(req, res) { 
    var body = req.body, 
     sess = req.session; 
    res.send({ 
     Status: "Success" 
    }); 
}); 

あなたがupload.array()を使用するときmulterを利用して、今req.bodyされたあなたは、角のポストの呼び出しで渡されたオブジェクトです。

ご不明な点がありましたらお知らせください。