Analysis of ideas on solving cross-domain routing conflict problem vue

Introduction to vue

(Pronunciation /vjuː/, similar to view) is a progressive framework for building user interfaces.

Vue focuses only on view layers and adopts a design developed from bottom to up.

Vue's goal is to implement responsive data binding and combined view components with the simplest API possible.

Vue is very easy to learn, and this tutorial is based on Vue version 2.1.8 test.

When we configure the following proxy in the route, we can solve cross-domain problems

proxyTable: {
   '/goods/*': {
    target: 'http://localhost:3000'
   },
   '/users/*': {
    target: 'http://localhost:3000'
   }
  },

This configuration method solves cross-domain problems to a certain extent, but it will bring some problems.

For example, our vue route is also named goods, and conflicts will arise at this time.

If there are many interfaces in the project, it is very troublesome to configure them here and it is easy to cause routing conflicts.

Correct posture

If all interfaces are uniformly standardized into one entrance, conflicts will be resolved to a certain extent

Add /api/ to the above configuration

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000'
   },
  },

If we configure this method, it will change when using http request. A API will be added before the request, and the relative route will also change, and an API will be added before the interface. This will also be very troublesome. We can use the following method to solve this problem

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

The above code removes our virtual API interface. When you really request the backend, the API will not be added. So when we request the front-end, we must also add the API prefix to match the proxy. The code is as follows:

logout(){
  ('/api/users/logout').then(result=>{
   let res = ;
    = '';
   (res);
  })
 },
 getGoods(){
  ('/api/goods/list').then(result=>{
   let res = ;
    = '';
   (res);
  })
 }

We can use axios' baseUrl directly to be api, so that every time we access, we automatically add this api prefix, so we don't need to manually write this prefix on each interface.

The configuration in the entry file is as follows:

import Axios from 'axios'
import VueAxios from 'vue-axios'
(VueAxios, Axios)
 = 'api'

If this configuration 'api/' will read the local domain by default

If the above configuration is not distinguished from production and development environments

Create a new configuration file in the config folder

const isPro = (.NODE_ENV, 'production')
 = {
 baseUrl: isPro ? '/api/' : 'api/'
}

Then introduce it in, which can ensure dynamic matching of the definition prefixes of production and development

import apiConfig from '../config/'
import Axios from 'axios'
import VueAxios from 'vue-axios'
(VueAxios, Axios)
 = 

After the above configuration, you can access it so easily in the dom, and there is no need to introduce the axios module into any component.

logout(){
  this.$('/users/logout').then(result=>{
   let res = ;
    = '';
   (res);
  })
 },
 getGoods(){
  this.$('/goods/list').then(result=>{
   let res = ;
    = '';
   (res);
  })
 }

Final code

Configure in the proxy

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

Configuration in config

Create a new configuration file in the config folder

const isPro = (.NODE_ENV, 'production')
 = {
 baseUrl: isPro ? '/api/' : 'api/'
}

Don't know much about production and development configuration

You can go to see the configuration code inside

const webpackConfig = (.NODE_ENV === 'testing' || .NODE_ENV === 'production') ?
 require('./') :
 require('./')

Configure in the entry file

import apiConfig from '../config/'
import Axios from 'axios'
import VueAxios from 'vue-axios'
(VueAxios, Axios)
 = 

pose to request API in dom

logout(){
  this.$('/users/logout').then(result=>{
   let res = ;
    = '';
   (res);
  })
 },
 getGoods(){
  this.$('/goods/list').then(result=>{
   let res = ;
    = '';
   (res);
  })
 }

PS:The following is a piece of code to learn the cross-domain settings under vue

1. When using vue development, cross-domain issues are often involved. In fact, there are files in vue cli that we set cross-domain requests.

2. When cross-domain requests cannot be requested, we can modify the dev:{} part in the config folder under the project.

dev: {
  env: require('./'),
  port: 8080,
  autoOpenBrowser: false,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: '/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

Set target to the domain name we need to access.

3. Then set the global properties in:

 = '/api'

4. At this point, we can use this domain name globally, as follows:

var url =  + '/movie/in_theaters'
  this.$(url).then(res => {
    = ;
  },res => {
   ('Call failed');
  });

Summarize

The above is an analysis of the ideas and solutions to cross-domain routing conflicts introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!