Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

It is believed that when each front-end developer develops a Vue framework project, they will basically use local server (proxyTable) proxy to solve the problem of local federation across domains. Usually we only know the use, but do not know the implementation principle. Some people can’t even use it. So today we will talk about the use and principle of proxyTable

A,proxyTableThe use of

After using vue-CLI tool to generate a vue project, we will generate a configuration file. The path of the configuration file of vue-cli2.x generated project is /config/index.js. The configuration file path of the generated project above vue-cli3. x is /vue.config.js

The code is as follows:

dev: {
  ...
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com'.// Target interface domain name
      changeOrigin: true.// Whether to cross domains
      pathRewrite: {
        '^/api': '/api'   // Rewrite the interface}}}... }Copy the code

The effect of this code is to proxy local interface requests starting with the/API field to http://www.abc.com:

'http://localhost:8080/api'= = = >'http://www.abc.com/api'
Copy the code

The above is the basic use of proxyTable, let’s talk about the meaning of proxyTable

Introduces a

ProxyTable is a cross-domain proxy server service provided by vuE-CLI scaffolding in development mode. Based on (http-proxy-Middleware plug-in).

meaning

Why proxyTable?

Sometimes during development, the backend interface we requested (A.B.C /data.json) was not in the same domain name as vUE (localhost:8080), and the backend did not provide CORS cross-domain service.

Normally, you can’t request data to the background via Ajax. Because of cross-domain, the same origin policy of the browser intercepted the return of this data and did not give it to vUE.

There are two solutions:

  1. Cors on the server (easiest and most convenient)

  2. Use proxy server to relay (vUE requests or its own background, let the background to request data is really the background, and then send data back to VUE)

Configure proxyTable for cross-domain

The basic principle of cross-domain proxyTable is as follows:

In development mode, Webpack will provide us with an HTTP proxy server and when we request the interface, it’s actually the HTTP proxy server from the requesting Webpack that is requesting the real data server Finally, the data goes through the WebPack proxy server and is finally passed to our VUE program.

Why is a proxy server ok?

Because the proxy server is not a browser, it does not have the same origin policy restrictions. Now that you know the basics, you can look at some of the configuration properties of the proxyTable node.

proxyTable: {
  // Set the '/ API 'equivalent to target. You can access/API === http://localhost:54321 in the link
  '/api': {
    target: 'http://localhost:54321/'.// This is the interface address of the server
    secure: true.// If HTTPS is used, this option needs to be enabled
    changeOrigin: true.// Is it a cross-domain request? Yes, there is no need to configure the proxyTable without cross-domain.
    pathRewirte: {
      // This is an append link. For example, if the interface contains/API, this configuration is required.
      '^/api': ' './ / equivalent to the
      // step 1 /api = http://localhost:54321/
      // step 2 /^api = /api + api == http://localhost:54321/api}}}Copy the code

Note about the pathRewrite node:

First, set ‘/ API’ in ProxyTable module, set the server address in target, that is, the address at the beginning of the interface, such as http://localhost:54321/, then we can use/API globally when calling the interface. / API function is equivalent to http://localhost:54321/ at this time, such as the address of the interface is http://localhost:54321/api/json.data, we can use the/API/json data

{^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {^/ API :/ API} {/ ^/ API :/ API} {/ ^/ API :/ API} {/ ^/ API :/ API} {/ ^/ API :/ API}

Conclusion:

  1. ProxyTable is a proxy server provided by WebPack in the development environment (using HTTP-proxy-Middleware).
  2. The goal is to make it easier to send Ajax cross-domain requests during development, when it is not convenient for the server to enable cross-domain functionality.
  3. This thing doesn’t work when you’re in a real release environment. Unless you configure a proxy server, or to enable CORS in the background

In this chapter we will finish here, and in the next chapter we will continue to talk about the principle of server proxy. Thank you for watching