How to configure proxy in Vue project

Preface

In front-end development, we often encounter situations where we need to obtain data by requesting the server. However, when we are doing local development, the server is often not built yet. At this time, we certainly cannot sit still and wait. At this time, we need to build a fake interface locally to simulate the return of server data.

In the Vue project, we can configure a proxy through the vue.config.js file and develop the backend interface locally, which greatly improves development efficiency. This article will introduce in detail how to configure the proxy in the Vue project and implement interface fake data.

Text

The proxy configuration in the Vue project needs to be done in the vue.config.js file. If the project is built with vue-cli3.x, first confirm whether the vue.config.js file exists in the project root directory. If there is no such file, you need to manually create this file in the project root directory. At this time, we can copy the configuration template of vue.config.js officially provided by vue-cli:

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 服务器地址
        changeOrigin: true,
        pathRewrite: {
          '/api': '' // 重写路径，例如接口地址是 /api/user，重写成 /user
        }
      }
    }
  }
}

In the above code, our agent is configured in the devServer option. Among them, port is used to specify the port number of the development server; proxy is used to configure the proxy, which is an object type. The key value is used to match the interface that requires a proxy, and the value value is the configuration item of the proxy.

The configuration items in the proxy object are introduced below:

• target: server address. Indicates the address of the target server that needs to be proxied, which can be an IP address or a domain name. It is usually specified through http(s)://. For example, http://localhost:3000 is the address of the target server.
• changeOrigin: Whether it is cross-domain. In development mode, we should set it to true. The default is false, which means that after receiving the request, the origin field of the URL will be directly replaced with the proxy address. For example, the url requested by the front end through ajax is http://localhost:8080/api/list. If the target is set to http://localhost:3000, then when changeOrigin is set to true, the actual request url sent will become http://localhost:3000/api/list .
• pathRewrite: Path rewrite. For some interface addresses that contain prefixes such as /api, /web, etc., these prefixes need to be rewritten. For example, if the requested URL is /api/user, when rewriting the path, you need to remove the /api prefix and rewrite it as /user.

It should be noted that in the development environment, The Vue project's proxy only takes effect on the development server. In a production environment, you may need to convert the proxy configured in devServer to a reverse proxy solution such as Nginx.

Summary

In Vue project development, the agent is a very practical tool. Through the proxy, we can forward calls to the backend interface to local mock data and handle cross-domain issues gracefully. This article introduces how to configure the proxy in the Vue project to perform front-end development more efficiently. Using the proxy in development can speed up our development and improve the development experience.

The above is the detailed content of How to configure proxy in Vue project. For more information, please follow other related articles on the PHP Chinese website!