クロスオリジンリクエスト

Question

フロントエンドからバックグラウンドで画像をアップロードしたいのですが... ngFileUploader bowerコンポーネントを使用します。

function SampleController(SampleData,Upload,$http) { 
     var vm = this; 
     vm.uploadFiles = function(files, errFiles) { 
     Upload.upload({ 
     url: "localhost:5000/upload", //webAPI exposed to upload the file 
     data: { 
     file: files 
     } 
    }).then(function(resp) { 
     console.log(resp)}); 
    } 

と私はそのhtmlファイルにNGF選択追加されます： 私のフロントエンドコードがあります。 それはエラーを表示します： XMLHttpRequestはlocalhost：5000/uploadをロードできません。 Cross originリクエストは、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。 どうすれば解決できますか？

Answer 1

あなたはこれを追加する必要があります。

header('Access-Control-Allow-Headers: Content-Type'); 
header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); 
header('Access-Control-Allow-Origin: *'); 

マイプロジェクトのバックエンドはlaravelです。そこで、これをRouteファイルに含めました。

Answer 2

は私がホワイトリストにあなたができるようになる起源をあなたをお勧めします

var app = require('express')(); 
app.use((req, res, next) => { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
    res.header('Access-Control-Allow-Methods', ['GET', 'PUT', 'POST', 'DELETE']); 
    next(); 
}); 

ミドルウェアとしてアプリケーションにCORSフィルタを追加します。