CODEWITHSUNDEEP
javascriptnode.jssslexpressreactjs
user3259472
user3259472

Reputation:

NodeJS + Express using fetch(): How to bypass "Your connection is not private" in Javascript?

Currently I have a NodeJS + ExpressJS client-side server set up and it makes API calls to the back-end server. But whenever I do, I first would have to go directly to the URL of the API back-end server and view the following page, and go to Advanced -> Proceed to https://backendserver.com:8080 (Unsafe), in order to be able to make the API call without any error.

enter image description here

Is there a way to always allow it to Proceed to https://backendserver.com:8080 without having to manually do it via browser?

Here is how I make the API call with fetch():

  loggingIn(userInfo) {

    var userInfoBody = {
        'username': `${userInfo.username}`,
        'password': `${userInfo.password}`
    }

    var configuration = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userInfoBody)
    }

    return function(dispatch) {
      fetch('https://backendserver.com:8080/creds', configuration)
      .then(response => response.json())
      .then(response => {
        console.log('Success and response is', response)
      })
      .catch((error) => {
        console.log("Error: ", error)
      })
    }

And my NodeJS + Express is set up like so:

var express = require('express');
var cors = require('cors');
var path = require('path');
var config = require('../webpack.config.js');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var app = express();
var compiler = webpack(config);

app.use(cors());

app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath}));

app.use(webpackHotMiddleware(compiler));

app.use(express.static('./dist'));

app.use('/', function (req, res) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.sendFile(path.resolve('client/index.html'))
})

var port = 3000;

app.listen(port, function(error) {
  if (error) throw error;
  console.log("Listening to ", port);
})

Upvotes: 0

Views: 3199

Answers (1)

Freyja
Freyja

Reputation: 40944

There's generally only one proper solution here: use a server certificate that is trusted by the browser.

If you have a public server, you will need to get a certificate from a trusted certificate authority. For this, Let's Encrypt is a great (and free) service, and letsencrypt-express integrates this nicely with Express.

If you have a private server (like a development or testing server, or a server used only by a few browsers), you can just use a self-signed certificate and add this as a trusted certificate in your browser or operating system.

Upvotes: 3

Related Questions