The Vue project configures cross domain access and proxy proxy settings

When developing an vue single-page application project, it is inevitable to request the back end, which usually leads to cross-domain problems. There are two common solutions

Backend settings allow cross-domain access

The front end accesses the back end through the proxy

Let's just talk about how to configure vue-cli proxy access:

vue-cli proxy

The simplest is to configure vue conifg for implementation

The following configures the backend of the three requests, which are:

Request http://localhost: 4201/adminapi/* will proxy request http://localhost: 8180/*

Request http://localhost: 4201/portalapi/* will proxy request http://localhost: 8185/*

Request http://localhost: 4201/securityapi/* will proxy request http://localhost: 8089/*

Since vue-cli is based on webpack, the devServer option of webpack supports configuration

module.exports = {
 // ...
 devServer: {
   port: 4201,
   proxy: {
    '/adminapi': {
     target: 'http://localhost:8180',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/adminapi': ''
     }
    },
    '/portalapi/': {
     target: 'http://localhost:8185/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/portalapi': ''
     }
    },
    '/securityapi/': {
     target: 'http://localhost:8089/',
     ws: true,
     changeOrigin: true,
     pathRewrite: {
      '^/securityapi': ''
     }
    }
   },
   disableHostCheck: true, //  This is due to the new version of webpack-dev-server For security reasons, the default check hostname , if hostname  Is not in configuration, access will be interrupted. 
 },
 //...
}

Nodejs does intermediate time route forwarding

Requests can be routed and forwarded with nodejs and framework express.

In a production environment, you can avoid using nginx to configure reverse proxies.

Each scheme has its own advantages and disadvantages, and the technical architecture selection needs to be aimed at its own project environment, and it is best to suit its own team.

Backend cross-domain access

Backend cross-domain access settings are also relatively simple, and the settings of different languages JAVA PHP Python Go are similar.

Query 1 has a lot of data, but in the production environment, for the sake of security, it is recommended not to set IP that allows cross-domain access or limit cross-domain access

Additional knowledge: Vue filter filter calls data, and something in methods reports an error

Today, I learned filter. I put the filtering method into methods and found that there is no function when I call it.

Then I checked log for 1 time. This this found that this this actually pointed to window

So the following solutions were found online:

Define 1 global variable:

let that;

this is assigned to that during the beforeCreate lifecycle and obtained through that

var vm = new Vue({
  el: '#app',
  data: {
  },
  beforeCreate: function () {
    that = this
  },
  methods:{
   fom(fmt){
    ...
   }
  },
  ....,
  filters: {
       dateformate: function (val) {
         return that.fom("yyyy-MM-dd")
       }
     }
  })