javascript - POST API 调用在没有 https 的情况下返回 CORS 错误，在没有 https 的情况下返回 ERR_CONNECTION_CLOSED

Question

我有一个简单的 Javascript 应用程序，它应该能够将 json 文件保存到服务器。

这是我的 Nodejs 服务器:

var express =   require("express");
var multer  =   require('multer');
var app         =   express();


var storage =   multer.diskStorage({
    destination: function (req, file, callback) {
        callback(null, './data');
    },
    filename: function (req, file, callback) {
        callback(null, file.fieldname + '-' + Date.now());
    }
});
var upload = multer({ storage : storage}).single('userPhoto');

app.get('/',function(req,res){
    res.sendFile(__dirname + "/index.html");
});

app.post('/api/json',function(req,res){
    upload(req,res,function(err) {
        console.log(req.body);
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

app.listen(3000,function(){
    console.log("Working on port 3000");
});

这是我的 JavaScript，我在其中进行 POST 调用。

function project_save_confirmed(input) {
    if ( input.project_name.value !== _onco_settings.project.name ) {
        project_set_name(input.project_name.value);
    }

    // onco project
    var _onco_project = { '_onco_settings': _onco_settings,
        '_onco_img_metadata': _onco_img_metadata,
        '_onco_attributes': _onco_attributes };

    var filename = input.project_name.value + '.json';
    var data_blob = new Blob( [JSON.stringify(_onco_project)],
        {type: 'text/json;charset=utf-8'});

    //save_data_to_local_file(data_blob, filename);
    upload_json_to_server(data_blob, filename);

    user_input_default_cancel_handler();
}

async function upload_json_to_server(data_blob, filename) {
    const response = await fetch('localhost:3000/api/json', {
        method: 'POST',
        body: data_blob,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
    const myJson = await response.json();
    console.log(myJson);
}

如标题所示，如果我删除 https://，则会出现 CORS 策略错误。如果我添加它，我会收到ERR_CONNECTION_CLOSED。我尝试使用 Postman 进行 API 调用并得到响应。

我做错了什么？

编辑:

我做了@js__发布的内容，但我仍然得到net::ERR_CONNECTION_CLOSED。这是我的服务器:

    var express =   require("express");
    var multer  =   require('multer');
    var app         =   express();

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


    var storage =   multer.diskStorage({
        destination: function (req, file, callback) {
            callback(null, './data');
        },
        filename: function (req, file, callback) {
            callback(null, file.fieldname + '-' + Date.now());
        }
    });
    var upload = multer({ storage : storage}).single('userPhoto');

    app.get('/',function(req,res){
        res.sendFile(__dirname + "/index.html");
    });

    app.post('/api/json',function(req,res){
        upload(req,res,function(err) {
            console.log(req.body);
            if(err) {
                return res.end("Error uploading file.");
            }
            res.end("File is uploaded");
        });
    });

    app.listen(3000,function(){
        console.log("Working on port 3000");
    });

这是我的 API 调用:

    async function upload_json_to_server(data_blob, filename) {
        const response = await fetch('https://localhost:3000/api/json', {
            method: 'POST',
            body: data_blob,
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const myJson = await response.json();
        console.log(myJson);
    }

问候

Answer 1

如 MDN 中所述，当 Web 应用程序请求的资源的来源(域、协议(protocol)和端口)与其自身来源不同时，它会发出跨域 HTTP 请求，我相信您的问题也与此相关。

只需使用这行代码在响应中设置 header 即可启用 CORS:

res.header("Access-Control-Allow-Origin", "*");

但是，此代码段将为服务器上的所有资源启用 CORS:

//遵循ES5

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

在 Express 代码顶部 var app = Express();

后使用它

阅读this文章了解有关 CORS 的更多信息。