POST API 调用返回不带 https 的 CORS 错误，不带 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、A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin 中所述，我相信您的问题也与此有关。

只需使用这行代码在响应中设置标题即可启用 CORS：

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

但是，此代码 sn-p 将为您服务器上的所有资源启用 CORS：

// Following 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 的更多信息。

Answer 2

处理 CORS 政策。 你需要安装cors npm 模块 这可能会对您有所帮助。

npm i cors

在 node.js 服务器文件中

const cors = require("cors"); //TO ACCESS LOCALHOST-LOCALHOST CONNECTION

app.use(cors()); //CORS MIDDLEWARE

Answer 3

当您向与您所在的服务器不同的服务器发出请求时，就会出现 CORS。这是由您的浏览器引起的，因此，您可能会在邮递员中得到响应，而不是在您在浏览器中尝试时得到响应。

这是绕过该错误的一个小技巧，只需将此 https://cors-anywhere.herokuapp.com/ 添加到您的 URL 之前，您应该没问题。

在你的情况下，它会是：

https://cors-anywhere.herokuapp.com/localhost:3000/api/json