GET request to port 81 using axios (or even js native fetch)

Question

I have a Node.js API running on port 81, and want to hit the endpoint from JavaScript like this:

function fetchFromApi() {
    const axios = require('axios');
    console.log('using port 81',axios.defaults);
    axios.request({
        method: 'get',
        url:'/api/getAccountList',
        port: 81, // port options is not valid - this does not have the desired result
    })
    .then( response => {
        console.log(response);
        const data = response.data;
        const errors = (data.errors) ? data.errors : false;
        if (errors) {
            setErrors(errors);
        }
    })
    .catch( reason => {
        console.log(reason);
    });
}

The network tab in chrome developer tools show this request still went to port 80.

When I try to code the entire protocol, port, host and url in the axios request, I get a CORS error:

axios.get('http://localhost:81/api/getAccountList')

Error is:

Access to XMLHttpRequest at 'http://localhost:81/api/getAccountList' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My API server is a simple Node.js server:

const express = require('express');
const app = express();
const port = 81;
app.get('/api/getAccountList', (req, res) => {
    const userIdBy = req.params.userIdBy;
    const apiToken = req.params.apiToken;

    if (!(userIdBy && apiToken)) {
        res.status(200).json({errors:['Missing credentials']});
        return true;
    }
    // check the user id and api token match up:
    console.log('Hello');
});
app.listen(port);

How can I make my client query the API using HTTP on port 81?

Answer 1

CORS is a security feature in most browsers that disables cross-origin requests—i.e., requests from a different hostname. To surpass it, install the cors dependency on your Express server via npm using:

npm install cors

Then you need to add it to every app via the cors() function to every {{httpMethod}} you want to allow other domains to make requests to.

Try editing your code like this:

const express = require('express');
const cors = require('cors')
const app = express();
const port = 81;

app.get('/api/getAccountList', cors(), (req, res)=>{})

Answer 2

On the client side, to get Axios to GET from port 81 on the same host as the javascript is running I used:

import axios from 'axios';
//...
//...
axios.defaults.baseURL = window.location.protocol + "//" + window.location.hostname + ":81";
const result = await axios('/your/endpoint');
//...
//...