MEAN堆栈文件上传

Question

我正在开发一个MEAN堆栈Web应用程序,我想使用ng2-file-upload上传文件.这是我的Angular 2代码.

classroom.component.html

    <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />
    <button type="button" class="btn btn-success btn-s"
                  (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
            <span class="glyphicon glyphicon-upload"></span> Upload all
          </button><br />

classroom.component.ts

uploader:FileUploader = new FileUploader({url: "http://localhost:3000/api/material/create-material"});

在server.js中

app.use(cors());
app.use('/api',api);
app.use('/api/material',material);

并在material.js

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');

router.post('/create-material',passport.authenticate('jwt', {session: false}),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});
    });
});

上传文件时出现以下错误

XMLHttpRequest无法加载 http:// localhost:3000/api/material/create-material.对预检请求的响应未通过访问控制检查:当请求的凭据模式为"包含"时,响应中的"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此不允许来源' http:// localhost:4200 '访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

这是什么原因？

Answer 1

将以下内容添加到您的nodejs中间件 -

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);

    next();
});

CORS支持*,null或精确的协议+域+端口 - > http://www.w3.org/TR/cors/#access-control-allow-origin-response-header

服务器需要使用正则表达式验证原始标头,然后您可以在Access-Control-Allow-Origin响应标头中回显原始值.

Answer 2

也许这有帮助：

无“Access-Control-Allow-Origin” - 节点/Apache 端口问题

要使用通配符 Access-Control-Allow-Origin，只需输入“*”而不是“ http://localhost:8888 ”原点