Javascript POST API调用返回不带https的CORS错误和不带https的ERR\u连接\u关闭

我有一个简单的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\u CONNECTION\u

。我尝试与Postman进行API调用，但得到了响应

我做错了什么

编辑：

我做了@js_uuu.发布的事情，但我仍然得到了

net:：ERR_CONNECTION\u 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);
    }

---

考虑处理CORS政策。 您需要安装

cors

npm模块 那可能对你有帮助

npm i cors

在node.js服务器文件中

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

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

---

处理CORS政策。 您需要安装

cors

npm模块 那可能对你有帮助

npm i cors

在node.js服务器文件中

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

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

如中所述，

web应用程序在请求一个来源（域、协议和端口）不同于其自身来源的资源时会发出跨来源HTTP请求，我相信您的问题也与此相关

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

res.header（“访问控制允许原点”，“*”）

但是，此代码段将为服务器上的所有资源启用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（）之后的代码顶部使用它

阅读文章以了解有关CORS的更多信息。
如中所述，
web应用程序在请求一个来源（域、协议和端口）与其自身来源不同的资源时会发出跨来源HTTP请求，我相信您的问题也与此相关

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

res.header（“访问控制允许原点”，“*”）

但是，此代码段将为服务器上的所有资源启用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（）之后的代码顶部使用它

阅读文章以了解有关CORS的更多信息。
当您向与您所在服务器不同的服务器发出请求时，会出现CORS。这是由您的浏览器引起的，因此，您可能会在postman中得到响应，而不是在您的浏览器中尝试时得到响应

这里有一个绕过该错误的小技巧，只需在
https://cors-anywhere.herokuapp.com/
链接到您的URL，您应该很好

在您的情况下，它将是：

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

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

这里有一个绕过该错误的小技巧，只需在
https://cors-anywhere.herokuapp.com/
链接到您的URL，您应该很好

在您的情况下，它将是：

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

尝试使用
http://
POSThttp://localhost:3000/api/json net:：ERR_CONNECTION_densed
此javascript代码是否驻留在index.html文件中？这个index.html文件也是来自节点服务器吗？如果是这种情况，您可以通过简单地给出url的相对路径向服务器发出ajax请求。对于您的情况，url应该是“/api/json”，而不是“localhost:3000/api/json”。请参阅index.html文件的url，并使用
http://
POST进行尝试http://localhost:3000/api/json net:：ERR_CONNECTION_densed
此javascript代码是否驻留在index.html文件中？这个index.html文件也是来自节点服务器吗？如果是这种情况，您可以通过简单地给出url的相对路径向服务器发出ajax请求。对于您的情况，url应该是“/api/json”，而不是“localhost:3000/api/json”。查看index.html文件的url我尝试了你所说的，但是我得到了
net:：ERR\u CONNECTION\u CLOSED
。我用我所拥有的编辑了我的文章我尝试了你所说的，但是我得到了
net:：ERR\u CONNECTION\u CLOSED
。我用我所拥有的编辑了我的文章