ノードJS - CORS - 要求ヘッダーフィールドプリフライト応答でAccess-Control-Allow-Headersによる許可が許可されていません

Question

私のサーバーにファイルをアップロードしようとしましたが、CORSとノードJSで問題が発生しています。

マイserver.jsファイルは、以下のようになります。

require('rootpath')(); 
var express = require('express'); 
var app = express(); 
var cors = require('cors'); 
var bodyParser = require('body-parser'); 
var expressJwt = require('express-jwt'); 
var config = require('config.json'); 
// pour l'upload 
var multer = require('multer'); 

const corsOptions = { 
    origin: ["http://localhost:3000"], 
    credentials: true, 
    methods: "POST, PUT, OPTIONS, DELETE, GET", 
    allowedHeaders: "X-Requested-With, Content-Type" 
} 
app.use(cors(corsOptions)) 
app.options('*', cors(corsOptions)); 

app.use(bodyParser.urlencoded({ extended: false })); 
app.use(bodyParser.json()); 

// // // use JWT auth to secure the api 
app.use(expressJwt({ secret: config.secret }).unless({ path: ['/users/authenticate', '/users/register'] })); 

// // // routes 
app.use('/users', require('./controllers/users.controller')); 
app.use('/challenges', require('./controllers/challenges.controller')); 


// NEW UPLOAD 
app.use(function(req, res, next) { //allow cross origin requests 
    res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET"); 
    res.header("Access-Control-Allow-Origin", "http://localhost:3000"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.header("Access-Control-Allow-Credentials", true); 
    next(); 
}); 

/** Serving from the same express Server 
No cors required */ 
app.use(express.static('../client')); 
app.use(bodyParser.json()); 

var storage = multer.diskStorage({ //multers disk storage settings 
    destination: function (req, file, cb) { 
     cb(null, './uploads/'); 
    }, 
    filename: function (req, file, cb) { 
     var datetimestamp = Date.now(); 
     cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]); 
    } 
}); 

var upload = multer({ //multer settings 
       storage: storage 
      }).single('file'); 

/** API path that will upload the files */ 
app.post('/upload', function(req, res) { 
    upload(req,res,function(err){ 
     console.log(req.file); 
     if(err){ 
      res.json({error_code:1,err_desc:err}); 
      return; 
     } 
     res.json({error_code:0,err_desc:null}); 
    }); 
}); 

// FIN NEW UPLOAD 

// start server 
var port = process.env.NODE_ENV === 'production' ? 80 : 4000; 
var server = app.listen(port, function() { 
    console.log('Server listening on port ' + port); 
}); 

そして、私は次のような問題があります。

のXMLHttpRequestがhttp://localhost:4000/usersをロードすることはできませんが。リクエストヘッダフィールドの認可は、プリフライト応答

にアクセス制御が許ヘッダによって許可されていないと私は私のファイルをアップロードしようとすると、私は新しい問題だ：

POST http://localhost:4000/upload 401（無許可）を

localhost：3000だけではなく、配列に多くの起点を追加しようとしましたが、何も変わりません。

他に何か：私は「起源」、「コンテンツ・タイプ」を追加した場合、ヘッダーのリストに「同意する」、私はこの次のエラーがあります。

OPTIONSは、ローカルホスト：4000 /ユーザーをネット:: ERR_CONNECTION_REFUSED 。

私はCORSが少し難しいと認めなければなりません。それは、その後、リッスンされます

filename.js $ノード：

以下のコードは動作するはずのおかげ

Answer 1

：

var express = require("express"); 
var cors = require("cors"); 
var app = express(); 

var corsOptions = { 
    origin: ' your_url', 
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
    } 

app.use(function(req, res, next) { 
    // res.header("Access-Control-Allow-Origin", "*"); 
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    // app.header('Access-Control-Allow-Origin', 'http://localhost'); 
    // app.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
    // app.header('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); 
    // app.header('Access-Control-Allow-Credentials', true); 
    next(); 
}); 
///products/:id 
    app.get('/helloworld', cors(corsOptions), function (req, res, next) { 
    res.json({msg: 'This is CORS-enabled for only example.com.'}); 
    }) 

    app.listen(3000, function() { 
     console.log("CORS-enabled web server listening on port 3000"); 
    }); 

var response_text; 

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; 
var xhr = new XMLHttpRequest(); 
//Get the html of the website 
function createCORSRequest(method, url) { 
    var xhr = new XMLHttpRequest(); 
    if ("withCredentials" in xhr) { 
     // Check if the XMLHttpRequest object has a "withCredentials" property. 
     // "withCredentials" only exists on XMLHTTPRequest2 objects. 
     xhr.withCredentials = true; 
     xhr.open(method, url, true); 
     xhr.send();  
    } else if (typeof XDomainRequest != "undefined") { 

     // Otherwise, check if XDomainRequest. 
     // XDomainRequest only exists in IE, and is IE's way of making CORS requests. 
     xhr = new XDomainRequest(); 
     xhr.open(method, url); 
     xhr.send(); 
    } else { 

     // Otherwise, CORS is not supported by the browser. 
     xhr = null; 

    } 
    return xhr; 
    } 

    var url = "your_url"; 

    var xhr = createCORSRequest('GET', url); 
    if (!xhr) { 
    throw new Error('CORS not supported'); 
    } 

    xhr.onload = function() { 
    response_text = xhr.responseText; 
    console.log(response_text); 
    console.log(values); 
    // process the response. 
    } 

    xhr.onerror = function() { 
    console.log('There was an error!'); 
    } 

その後端子と、書き込み中のファイルのディレクトリにcd http://localhost:3000/helloworld これはうまくいきます。