Having trouble configuring the proxy port for my Vue.js application

I'm currently developing a web application using vue.js for the front end and node.js for the server. Vue is running on port 8080 and Node.js is running on port 3001. To make API calls, I have set up a proxy in my vue.config.js file, but it doesn't seem to be working as expected.

Here's the code snippet from my vue.config.js:

module.exports = {
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:3001',
                ws: true,
                secure: false
            }
        }
    }
}

Below is the script from my Home page component where I use axios to call the API:

import axios from 'axios'

export default {
  data () {
    return {
      categories: []
    }
  },
  created () {
    axios.get('/api/v1/categories')
      .then(res => {
        debugger
        this.categories = res.data
      })
  }
}

As a beginner with vue.js, I'm not sure what's causing the issue.

EDIT This is the error I am encountering:

Proxy error: Could not proxy request /api/v1/categories from localhost:8080 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

Answer №1

After coming across an issue, I fixed it by substituting localhost with 127.0.0.1 and then [::1]

Several months later, I found myself reverting back to using 127.0.0.1... I suspect some changes may have been made to my hosts file.

To verify your current setup, try entering ping localhost in your terminal and adjust your proxy accordingly based on the response.

Answer №2

Give this a shot

const config = { 
  devServer: { 
    proxy: { 
      '/api': { 
        target: 'http://localhost:3001', 
        ws: true, 
        secure: false 
      } 
    } 
  } 
}
module.exports = config;

Don't forget to double check if you have configured a base path for axios. If you have, remember to remove the 'api' prefix from your axios calls as the base path will automatically be included in the request.

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

The React useEffect hook runs whenever there is a change in the state

Within my React component, I have the following code snippet (excluding the return statement for relevance): const App = () => { let webSocket = new WebSocket(WS_URL); const [image, setImage] = useState({}); const [bannerName, setBannerName] = use ...

The instantiation of the cloudinary module failed because of an error with the injector

I am currently developing a MEAN application based on the template provided by Linnovate. You can find the template at https://github.com/linnovate/mean My goal is to integrate a module called Cloudinary into my application. To achieve this, I followed th ...

Troubleshooting issues with Three.js and .obj file shadows

I've been diving into learning Thee.js, and while it's fairly straightforward, I've hit a roadblock with getting shadows to work. Despite setting castShadows, recieveShadows, and shadowMapEnabled to true in the appropriate places, shadows ar ...

Leveraging packages obtained from npm repositories

Recently, I came across this guide about React that included a paragraph that left me puzzled. According to the guide, CommonJS modules (found in npm) cannot be directly used in web browsers due to technical limitations. Instead, you need a JavaScript " ...

What is the best way to access an item within an item using HTML and AngularJS?

I attempted to retrieve a value from two dynamic objects using AngularJS. <div ng-controller="SampleController"> <div> {{item['111']['price']}} </div> within the SampleController $scope.item={111:{price:"232"},112:{ ...

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

What is the Reason for Wrapping Masterpage Javascript File References in a PlaceHolder Control?

While examining the demo project for xVal, a validation framework designed for ASP.NET MVC, I observed that the Masterpage javascript references were enclosed in a PlaceHolder control: <asp:PlaceHolder runat="server"> <script type="text/javas ...

Retrieve database SQL information using JavaScript to display data

I'm struggling to push the value from a textbox to SQL and display it. Despite reading numerous topics, I still can't figure it out. My explanation skills are lacking, but hopefully you can understand what I'm trying to achieve, especially i ...

Issue with VueJS not functioning properly upon initial interaction or initial trigger

After some trial and error, I was able to successfully create dynamic elements. The main goal of this exercise is to generate dynamic divs based on a specified "count", with the ability to add multiple textboxes inside each div. If you're curious to ...

Encountering ExpressionChangedAfterItHasBeenCheckedError during ngOnInit when utilizing Promise

I have a simple goal that I am working on: I want to display data obtained from a service in my component. This is how it used to work: In my component: ... dataSet: String[]; ngOnInit(){ this._service.getDataId().then(data => this.dataSet = da ...

What makes components declared with "customElements.define()" limited in their global usability?

I've been tackling a project in Svelte, but it involves some web components. The current hurdle I'm facing is with web components defined using the customElements.define() function in Typescript, as they are not accessible unless specifically im ...

Why does the old component of the router still receive and handle events when <router-view/> changes?

Ugh... I need to explain a tricky situation I'm facing. I have a parent component that has two children listening for the same event and performing similar actions (see code snippet below): mounted() { EventBus.$on('edit', (data) => { ...

Does Node Express call the next middleware immediately when the next function is called?

Can someone please help me grasp the concept of how the next function operates within the Node Express framework? I know that we utilize the next function within the current middleware to trigger the execution of the subsequent middleware listed. These mid ...

This particular JavaScript function is only designed to operate on the initial input box in the provided

I have a question regarding echoing rows of $data inside input boxes. I am using a JavaScript function that is supposed to copy the input value to the clipboard when the input box is clicked. However, I am encountering an issue - the function only works ...

exploring the realm of creating constants in AngularJS functions

controller.js angular.module('app.main') .controller('MainCtrl', function ($scope, currentUser, addAPI) { $scope.form = {}; $scope.subdomain = currentUser.domainName; $scope.add = function () { addAPI.addAdmin(loc ...

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

I'm still learning about Angular and JavaScript, so please bear with me if my questions seem silly. I've been trying to add a theme to my Angular project. When I include the entire code in index.html, everything works fine. However, when I move ...

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

I am currently struggling with retrieving the HTML inner text value using CSS selector or XPath. While I can achieve this using document.getElementById, I am unable to do so using selectors. I can only print the tag element but not the text from it. For e ...

Issues arise when attempting to retrieve information in NextJS from a local API

One of my coworkers has created a backend application using Spring Boot. Strangely, I can only access the API when both our computers are connected to the same hotspot. If I try to access the other computer's API and port through a browser or Postman, ...

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

I've recently added an Animated Mouse Scroll Down button on my website. However, when I click the button, the smooth scroll feature is not working as expected. Important Note: I already have a separate button for navigating to the next section where ...

Alternative method for handling web requests in case JavaScript is not enabled

Issue: i) I am developing a JSF2 application and need to implement a tab control on a page. When a user clicks on a tab, the content for the panel below should be loaded from an xhtml file on the server using an ajax call. ii) I want this functionality ...