Simple way to configure proxy cross-domain in vue2

Preface

Calling the backend interface to access backend data, but because any of the protocol, domain name, and port that requests the url is different from the current page url, the address of our vue project is generally localhost 8080 port, and the backend does not configure cross-domain (if the backend configures cross-domain, it is usually cors), so the frontend needs to configure cross-domain, and Vue cross-domain is configured in the file.

A cross-domain solution for proxy

Method 1:

The backend brother will solve it so that the frontend can access the interface normally even if there are cross-domain problems.

Method 2: Configure the agent across domains

proxy attribute under devServer attribute in file

 devServer: {
    host: 'localhost',//Local address    port: '8080',//Port number    hot: true,//Automatic refresh of hot update    open: true,//Open automatically    overlay: {  //When a compilation error or warning occurs, full screen overwrite is displayed in the browser.  Only display error messages without warning conditions limit      warning: false,
      error: true
    },
    proxy: {
      "/api": {
        target: '',//Proxy address Any use /api        changeOrigin: true,//Allow cross-domain requests        secure: false,
        pathRewrite: { //Rewrite the path Replace the specified path in the request address          ['^/api']: '/' //Replace the api in the request address with empty        }
      }
    }
  }

/api understanding

‘/api’: If you encounter the beginning of this character, add the ip or domain name in the target to the character.

For example:

①Login interface: http://asdfgh:5000/login

...The configuration process is omitted in the middle...

②npm run serve:Local: http://localhost:8080/

③Login request sent after click: http://localhost:8080/api/login

④ The function of /api is to turn localhost:8080 before /api into target content http://asdfgh:5000/

⑤The complete path becomes http://asdfgh:5000/api/login

⑥There is no such API in the actual interface, so pathwrite rewrite solves this problem.

⑦ Pathwrite recognizes the beginning of the API and rewrites /api as empty, that is, this /apil does not exist, and the complete path becomes: http://asdfgh:5000/login

For details, you can view the official address of webpack:DevServer | webpack

Summarize

This is the end of this article about simply configuring agents across domains in vue2. For more related configuring agents across domains, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!