跨域請求

我想從前端恢復上傳圖像....我將使用ngFileUploader組件。我的前端代碼：跨域請求

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。協議方案僅支持交叉源請求：http，data，chrome，chrome-extension，https，chrome-extension-resource。我該如何解決？

來源

2017-01-30 raksha

'url：「http：// localhost：5000/upload」' –

URL的前面被忽略。投票結束爲錯字。 – Quentin

它會再次提供錯誤 - POST http：// localhost：3000/upload 404（Not Found） – raksha

你需要補充一點：

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

我的項目後端是laravel。所以，我將它包含在Route文件中。

來源

2017-01-30 13:01:49 Mohammed

我的支持是expressJS。所以我是否需要包含這些頭文件 – raksha

訪問此：http://stackoverflow.com/questions/11181546/how-to-enable-cross-origin-resource-sharing-cors-in-the-express-js-framework -o – Mohammed

添加CORS過濾器，你的應用程序作爲一箇中間件

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(); 
});

我建議你白名單，你會允許的起源。

來源

2017-01-30 13:22:08

沒有..它不工作...再次給出相同的錯誤 – raksha

確認，您的服務器正在運行：3000和客戶端上：5000？如果是這樣，客戶端中的網址必須是http：// localhost：3000/upload –

我已經編輯了它.... – raksha

回答

相關問題