Configuring a devServer proxy leads to a 404 error

Question

Configuring a devServer proxy leads to a 404 error

Within my src/vue.config.js file, I have the following configuration:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
      },
    },
  },
};

When I call the API using the following axios request:

axios.get('/api/parts')
    .then(result => commit('updateParts', result.data))
    .catch(console.error);

However, instead of receiving the expected data, I continue to encounter the following error message:

Error: "Request failed with status code 404"

Upon further investigation, I noticed that the request is being directed to port 8080 instead of 8081. Interestingly, I can access the API without any issues through a web browser.

How should I go about debugging this issue?

javascript api vue.js webpack

Answer 1

Answer №1

It appears that your vue.config.js file is mistakenly placed in the src folder instead of being located at the root of your project. To resolve this issue, simply move the file to the correct directory.

If you need further guidance on configuring the server, you can refer to the documentation provided here: https://cli.vuejs.org/config/#devserver-proxy. It seems like you are following the correct steps, but the file is just misplaced in the wrong folder.

Answer 2

It appears that your vue.config.js file is mistakenly placed in the src folder instead of being located at the root of your project. To resolve this issue, simply move the file to the correct directory.

If you need further guidance on configuring the server, you can refer to the documentation provided here: https://cli.vuejs.org/config/#devserver-proxy. It seems like you are following the correct steps, but the file is just misplaced in the wrong folder.

Answer 3

Answer №2

After testing several different combinations, I finally found the solution to my problem.

In my setup, I am utilizing Axios and my application is currently hosted on port 8080

Main JavaScript file:

axios.defaults.baseURL = 'http://localhost:8080/api/'

Vue configuration file:

module.exports = {
    devServer: {
      proxy: 'https://reqres.in'
    }
}

Vue Component Code:

this.axios.get("users")
   .then(response => {
    this.items = response.data.data;
    this.isLoading = false;
})

Network Activity in Browser:

https://example.com/network_tab.png

Answer 4

After testing several different combinations, I finally found the solution to my problem.

In my setup, I am utilizing Axios and my application is currently hosted on port 8080

Main JavaScript file:

axios.defaults.baseURL = 'http://localhost:8080/api/'

Vue configuration file:

module.exports = {
    devServer: {
      proxy: 'https://reqres.in'
    }
}

Vue Component Code:

this.axios.get("users")
   .then(response => {
    this.items = response.data.data;
    this.isLoading = false;
})

Network Activity in Browser:

https://example.com/network_tab.png

Answer 5

Answer №3

Using a proxy can cause issues if the remote address does not match the request URL and port. To fix this in your vue.config.js, make the following edits:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true
          }

Alternatively, you can utilize the rewrite attribute like so:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true,
              pathRewrite: { '^/api': '/'}
          }
      }

The difference lies in the actual request made - the top option will be http://localhost:8080/api/..., while the rewrite option will be http://localhost:8080/...

Answer 6

Using a proxy can cause issues if the remote address does not match the request URL and port. To fix this in your vue.config.js, make the following edits:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true
          }

Alternatively, you can utilize the rewrite attribute like so:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true,
              pathRewrite: { '^/api': '/'}
          }
      }

The difference lies in the actual request made - the top option will be http://localhost:8080/api/..., while the rewrite option will be http://localhost:8080/...

Configuring a devServer proxy leads to a 404 error

Answer №1

Answer №2

Answer №3

Similar questions

Dealing with a mysterious Vuejs object that remains undefined within a watched property

The Angular directive alters the scope, however, the template continues to display the unchanged value

Is there a way to prevent the jsonPayload in stackdriver from automatically converting to a struct format?

My React higher order component implementation is revealing the protected route momentarily

Is there a way for me to incorporate view charts into my JavaScript file with Vue.js?

Clicking on the button will result in the addition of new

Using Javascript to multiply strings

Tips for retrieving a value from fs.accessAsync function

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

At what point does the promise's then function transition to being either fulfilled or rejected?

Adding JSON data to an array in Angular JS using the push method

What are some ways to change the appearance of a component using its parent?

What initiates Electron after npm processes the package.json file?

Tips for validating user input within a specific range in React?

Issues encountered while retrieving data from an API using get method in Vue.js and express.js

Angular directive ng-template serves as a component type

Player-Oriented Online Game: Addressing Target Accuracy Challenges in ctx.setTransform

I am having trouble getting the bootstrap link and css files to work on a specific URL. Can you please help me troubleshoot this issue and let me know if there are any additional files needed to

Exploring the process of transforming a dynamic PDF into a static PDF using PHP or NodeJS

Guide on making a personalized object in JavaScript