POST API call returns CORS error without https and ERR_CONNECTION_CLOSED without

问题

I have a simple Javascript application that should be able to save a json file to the server.

This is my nodejs server:

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

And this is my JavaScript, where I make the POST call.

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

As the title says, If I remove the https:// I get the CORS policy error. If I add it I get ERR_CONNECTION_CLOSED. I tried make the API call with Postman and I get a response.

What am I doing wrong?

EDIT:

I did what @js__ posted but I still get net::ERR_CONNECTION_CLOSED. Here is my server:

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

And this is my API call:

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

Regards

回答1:

As described in 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 and I believe your issue is also related to that.

Simply using this line of code to set a header on your response will enable CORS:

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

This code snippet, however, would enable CORS for all resources on your server:

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

Use it at the top of your Express code after var app = Express();

Read this article to know more about CORS.

回答2:

To deal with CORS policy. you need to install cors npm module That might help you.

npm i cors

In node.js server file

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

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

回答3:

CORS arises when you're making request to a different server than the one you're on. It is caused by your browser, so, you might get the response in postman and not when you try it in your browser.

Here's a small trick to bypass that error, just prepend this https://cors-anywhere.herokuapp.com/ to your URL and you should be fine.

In your case, it would be:

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

来源：https://stackoverflow.com/questions/53756789/post-api-call-returns-cors-error-without-https-and-err-connection-closed-without

标签

javascript

node.js