Vue development practice is my best practice, not the best in the industry, only for your reference, this is a series of articles, but the release time and content is not fixed.

introduce

In local development scenarios, the project startup address is http://localhost:8080, but the back-end interface may be another address. In this case, cross-domain problems occur and debugging fails.

To solve this problem, two solutions are usually adopted:

  • With local agents, most front-end projects come with this capability
  • Is not recommendedThe back-end setCORS head

Currently, vuE-CLI has its own proxy function.

Configuring the Proxy Field

Configure the proxy field in vue.config.js:

// vue.config.js

/ * * *@link https://cli.vuejs.org/config/#vue-config-js
 * @type {import('@vue/cli-service').ProjectOptions}* /
module.exports = {
  / * * *@link https://cli.vuejs.org/zh/config/#devserver
   * @type {import('webpack-dev-server').Configuration}* /
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.172:4000'.// Please fill in the real back-end address
        changeOrigin: true,},},},}Copy the code

Page of all begins the interface/API will be acting to http://192.168.0.172:4000.

Proxy For complete configuration items, see HTTP-proxy-middleware.

Note Any modification to vue.config.js requires a restart of the application.

Match rule

     https://localhost:8080/api/users?sortBy=createAt#nose
     \______/\_______/ \__/\________/ \_____________/\___/
        |        |      |        |           |         |
      scheme  hostname port   pathname     query      hash
Copy the code

If the input/API matches a request that begins with/API.

The sample

Here’s axios as an example

import Axios from 'axios'

Axios.get('/api/users')
Copy the code

Open your browser’s console and switch to the Network panel to see that the request was successful

series

  • The routing configuration
  • Menu and Routing
  • Local Proxy scheme
  • Local Mock scheme