1

AngularJS のngUploadディレクティブを使用してファイルをアップロードする NodeJS サーバーに接続する AngularJS アプリを作成しました。

問題は、サーバーからデータが返されると、クライアントがブロックされることです。

Blocked a frame with origin "http://localhost" from accessing a frame with origin "http://localhost:3000". Protocols, domains, and ports must match. ng-upload.min.js:14
Uncaught TypeError: Cannot read property 'body' of undefined 

AngularJS は localhost で実行されていますが、NodeJS はポート 3000 の localhost で実行されているため、呼び出しはクロスドメインです (ポート 80 に変更しようとしましたが、機能しませんでした)。

これは、クライアント側のフォーム コードです。

    <form enctype="multipart/form-data" method="POST" action="http://localhost:3000/upload" name="iconForm" id="thumbnail_form" ng-upload>
        <div class="submitFormRow fileUpload">
            <span class="btn btn-warning uploadBtn" style="z-index: 99;">Upload resume</span>
                 <input type="file" class="input" name="file" tabindex="-1" size="12" id="file" style="z-index: 999;filter:alpha(opacity=0);">
                 <input type="hidden" value="{{PositionId}}" id="positionid" name="positionid"/>
                 <input type="hidden" value="{{user_fullName}}" id="fullname" name="fullname"/>
                 <input type="hidden" value="{{user_email}}" id="email" name="email"/>
            <div class="clear"></div>
        </div>
        <div class="submitFormRow submitBtn">
            <input type="submit" upload-submit="bar(content)" class="btn btn-danger" value="Submit"/>
        </div>
            <div>{{uploadResponse}}</div>
    </form>

これは NodeJS サーバー上のコードです。

app.post('/upload', function (req, res) {
setTimeout(
    function () {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
        res.header("Access-Control-Allow-Methods", "GET, PUT, POST");

        //res.type('application/json');
        var positionId = req.body.positionid ? req.body.positionid : "-1";
        var fullName = req.body.fullname ? req.body.fullname : "John Doe";
        var email = req.body.email ? req.body.email : "default@default.com";
        if (req.files.length == 0 || req.files.file.size == 0)
            res.send({"success":false, message: "No File was uploaded", data:""});
        else {
            var fileType = req.files.file.name.split(".").pop();
            if(!checkFileType(fileType)){
                res.send({"success":false, message: "Invalid file type", data:""});
            }
            else {
                var file = req.files.file;
                fs.readFile(req.files.file.path,function(err,data){
                    var newPath = __dirname + "/uploads/user_" + new Date().getTime() + "_for_position_" + positionId +"." + fileType;
                    fs.writeFile(newPath, data, function (err) {
                        if(err){
                            res.send({"success":false, message: "file wasn't saved", data:""});
                        }
                        else {
                            var dbSaveCallback = function(err,result){
                                if(result){
                                    res.send({"success":true, message: "file saved", data:newPath});
                                }
                                else {
                                    res.send({"success":false, message: "file wasn't saved", data:""});
                                }
                            };
                            saveApplicantToDatabase(positionId,fullName,email,newPath,dbSaveCallback);

                        }
                    });
                });
            }
        }
    },
    (req.param('delay', 'yes') == 'yes') ? 2000 : -1
);
});

サーバーはデータを含むjsonp結果を返しますが、ngupload.min内でブロックされており、使用できません。

この問題を解決するにはどうすればよいですか?

4

1 に答える 1