Location>code7788 >text

Vue configuration proxy (devServer) to solve cross-domain problems

Popularity：95 ℃/2024-09-06 12:31:35

1. Role:

The official Vue documentation explains:

If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in your development environment. This problem can be solved with the hit the nail on the head option to configure.

In layman's terms, it's meant to solve cross-domain problems.

2. Usage:

This article are to axios send a request for example, samples are as follows:

1
2
3
("/abc/def");
("/abc/ghi");
("/abc/jkm");

The requests sent by axios are local to the server address spliced on to the requests sent, as inhttp://xxx:8080/abc/def

2.1 Specifying the Request Beginning Configuration

If the requests sent all begin with /abc. proxy configuration:

1
2
3
4
5
6
7
8
9
10
devServer: {
    proxy: {
      "/abc": {
        target: ":8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    }
},
  • "/abc":{} : In quotes, this proxy is configured to detect accesses that begin with /abc.
  • target : when an interface starting with /abc is detected, the port and address of the request will be changed to the address of the back-end interface to avoid cross-domain problems.
  • changeOrigin : whether to change the host parameter in the packet, default is true.
  • ws : whether to proxy websockets
  • The proxy request is:

http://localhost:8080/abc/def —> :8081/abc/def

2.2 Proxying Multiple Interfaces

Request Example:

1
2
3
4
// http://localhost:8080/zzz/one
("/zzz/one");
// http://localhost:8080/xxx/two
("/xxx/two");

Proxy Multi-Interface Mode 1

To monitor multiple interfaces, you can write multiple configurations in the proxy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
devServer: {
    proxy: {
        "/zzz": {
          target: ":8082",
          changeOrigin: true,
          ws: true,
        },
        "/xxx": {
          target: ":8083",
          changeOrigin: true,
          ws: true,
        },
    },
},

Proxy Multi-Interface Mode 2

Configuring axios

1
2
3
4
5
6
7
// Whenever sending an axios request, prefix the request with /api, e.g. /zzz/one -> /api/zzz/one
= "/api";
/*
With the configuration above, requests sent locally will become
http://localhost:8080/api/zzz/one
http://localhost:8080/api/xxx/two
*/

Configuring the Agent

1
2
3
4
5
6
7
8
9
10
11
12
13
devServer: {
    proxy: {
        "/api": {
            target: ":8084",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": "",
            },
        },
    },
},
//pathRewrite : Check if there is /api in the proxy's request, if there is, replace /api with the content after the colon, if there is, replace it with an empty string, i.e. delete /api. (^ is the content of the regular expression, meaning the beginning of the qualification)

3. Common parameters

1
2
3
4
5
6
7
8
9
10
11
12
target："xxx",            // The url string to be parsed using the url module
forward："xxx",           // The url string to be parsed using the url module
agent：{},                // Object to be passed to http(s).request
ssl：{},                  // Object to be passed to ()
ws：true/false,           // Whether to proxy websockets
xfwd：true/false,         // Add the x-forward header
secure：true/false,       // Whether to validate SSL Certs
toProxy：true/false,      // Pass absolute URLs as paths (useful for proxy agents)
prependPath：true/false,  // Default:true Specifies whether to add the target's path to the proxy path.
ignorePath：true/false,   // Default:false Specifies whether to ignore the proxy path for incoming requests.
localAddress："xxx",      // The local interface string to bind to for outgoing connections.
changeOrigin：true/false, // Default:false Changes the origin of the host header to the destination URL.

 

<Previous Next>