Having trouble with the API authentication call, receiving a "Failed to load resource: net::ERR_CONNECTION_REFUSED" error message

I am facing an issue with my Vue and .net application. Whenever I run "NPM start serve," it successfully builds the app. The app is running locally at: http://localhost:8080/ However, when I attempt to log in, I encounter the following error:

Console error:
Failed to load resource: net::ERR_CONNECTION_REFUSED localhost:50463/user/authenticate:1

I thought changing the port to 8080 in the axios.service.js file would resolve the error, but now I am getting a CORS headers error. How is changing the port causing this issue, and how can I resolve it?

I apologize if my question is unclear; I am new to .net and Vue and suspect this may be a routing problem, but I am unsure as the code was written by other developers, and I am still learning.

axios.service.js

const API_URL = 'http://localhost:50463/';
axios.defaults.baseURL = API_URL;
axios.defaults.headers.post['Content-Type'] = 'application/json';

axios.interceptors.response.use(
    (a) => a,
    (error) => {
        if (!error.response) return Promise.reject({response: {data: 'Network Error'}});
        else if (error && error.response && error.response.status === 401) {
            store.dispatch('authentication/logout');
            router.push('/');
            window.location.replace('/');
            //
        }
        return Promise.reject(error);
    }
);

export const SetBearerToken = function(token) {
    axios.defaults.headers.common['Authorization'] = token ? `Bearer ${token}` : null;
};

export const FilesUrl = API_URL + 'file/';

I have tried modifying the port in the API URL.

I have attempted to add the user I am logging in with to the database, but it requires some fields. I then used the details of a user already present in the database, but I am still encountering the same error.

Answer №1

Make sure that both your front-end and back-end are up and running. ERR_CONNECTION_REFUSED could indicate that the API is not running. It seems like your API is running on localhost:50463 while your front-end is hosted on localhost:8080.

Changing the port to 8080 will redirect the front end to itself, as it is hosted on localhost:8080.

To start the front-end:

npm serve

To start the backend:

dotnet run

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularFire and Ionic - There is no data being sent to the server from the form

I am using Ionic and AngularFire to build my app, but I have encountered a new issue: the form data is empty! Only the fields in my Firebase database are visible. How can I retrieve the user-entered form data from the Firebase database? Here is a screensh ...

Transferring information from one webpage to another using AJAX or embedding it with an iframe

I recently received an address with a basic HTML structure containing numbers. I attempted to display it using an iframe, which worked when tested separately but encountered a connection refusal error when embedded in my page. Alternatively, I tried AJAX ...

Deploying CSS/JS files in Magento 2 is a crucial

Hello, I recently set up magento2 with the sample data included. After attempting to deploy static css/JS using the command php bin/magento setup:static-content:deploy, I didn't receive any errors but the issue persists. Additionally, I am unable to l ...

The instance is referencing "greet" during render, but it is not defined as a property or method

At the same time, I encountered another error stating "Invalid handler for event 'click'". <template> <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:cli ...

Trouble with Mongoose save() function failing to update data

I am currently working on enhancing a fully functioning CRUD app by adding a new feature that allows users to update a list of vendors. They have the ability to add new vendors, update existing ones, and delete vendors. While the add and delete functions a ...

Suggestions to update arbitrary content at a 5-second interval in Vue using Nuxt.js

As a Vue beginner, I am facing an issue with changing random text every 5 seconds while the page is loading. <template> <section class="container"> <h1 class="title"> Welcome {{ whois }} </h1> </section&g ...

Sending a POST request to a Flask server using Stripe and AJAX

I am attempting to implement a function that triggers an ajax request when a stripe form is submitted. However, using the .submit() method doesn't seem to be working as expected. Here is my current code: HTML <form action="/download_data" method= ...

ASP.NET C# Crystal Reports Sub-report

When combining the main report and sub-report code, an exception message is being thrown: "Missing Parameter Values". Despite ensuring that all parameters are correctly set. string strSelect = ""; strSelect = "SELECT * FROM Daily_Order WHERE orderDate B ...

Develop interactive, reusable custom modals using React.js

I am currently working on creating a reusable modal: Here is my component setup: class OverleyModal extends Component { constructor(props) { super(props); } openModal = () => { document.getElementById("myOverlay").style.display = "blo ...

eliminate item from list upon user clicking the button

Does anyone have any tips on how to effectively store and remove user-selected items from an object in JavaScript? I'm encountering an issue where only the first object in the array is being removed, and not the others. Any help would be appreciated! ...

Attempting to implement Ajax for my AddToCart feature while iterating through a form

At the moment, I am facing an issue where only the first item is being added to the cart and the page remains unchanged. On each page, there are a minimum of 3 items, with a new form created for each one. However, the other products do not get added to the ...

Typescript throws an error indicating that the "this" object in Vue methods may be undefined, displaying error code TS2532

As a beginner in question writing, I apologize if my wording is not clear. The issue at hand: I am working on a Vue application with TypeScript. export default { methods: { setProgram: (program: Program)=>{ this.program = progra ...

Listener document.addEventListener (function() {perform the function as shown in the illustration})

Currently facing an issue that I'm struggling to resolve, attempting to execute a code snippet from the ngcordova website without success. While using the plugin $cordovaInAppBrowser.open ({... it generally functions well until the inclusion of the ...

The URL overwrites the Ajax transfer type

When making an ajax call using a generated URL from a paginator script, I encountered an issue. The URL was dynamically created as shown below: "http://192.168.1.23:8000/pricing/0/999/null/?page=9" A similar link is generated on the server: "https://xxx ...

Having difficulty locating an element that includes certain text

There is a snippet of code from the page: <label> <input type="checkbox"> </input> " some text" </label> I am trying to locate an element that contains the text "some text". If I use WebElement().ByXPath("//div/label[ ...

Tips on dividing the information in AngularJS

Sample JS code: $scope.data={"0.19", "C:0.13", "C:0.196|D:0.23"} .filter('formatData', function () { return function (input) { if (input.indexOf(":") != -1) { var output = input .split ...

Steps for adding a row as the penultimate row in a table

There aren't many solutions out there that don't rely on jQuery, but I'm looking to avoid it. The row content needs to be generated dynamically. Here is my flawed approach: function addRow() { let newRow = '<tr><td>B ...

ways to make a list element inaccessible by using either Javascript or jQuery

When the user clicks on my eraser, I want the color to be hidden or not display its dropdown elements. I attempted this with the following code snippet. $('#chooseEraser').mousedown(function(e){ curTool = "eraser"; checkEraser ...

Executing control with AngularJS when ng-change event occurs

When using AngularJS One interesting scenario I encountered is having a ng-change event on a text field and seeing the function being called correctly: <input type="text" ng-model="toggleState" ng-change="ToggleGroupVisiable()" data-rule"" /> The ...

Vite, Vue, and Vuetify: A multitude of inexplicable network requests happening

Excited to share that I've started working on my very first Vue project - a Simple CRUD Application. Utilizing Vite, Vue3, and Vuetify, with PNPM as the Package Manager. Development has been smooth so far, without encountering any major issues. Howev ...