vue2.0 axios cross-domain and rendering problem solution

(Used with scaffolding vue-cli)

Step 1: Declare the use as follows

import axios from
'axios';
.$axios=axios;

Then this.$axios can be used in other vue components

Step 2: Configure proxyTable (under config) in webpack

dev:
 { 
Join the following
proxyTable:
{
'/api':
{
target:
'',//Set the interface domain name and port number you call Don't forget to addhttp 
changeOrigin:
true,
pathRewrite:
 { 
'^/api':
'/'//This is understood as using '/api' instead of the address in the target. In the later component, we use api instead of the interface when we delete the interface in the later component. 
For example, I want to call'/v2/movie/top250'，Write directly‘/api/v2/movie/top250'Just
}
}
},

Step 3:

Try it, cross-domain success, but note that this is just a cross-domain problem solved in the development environment (dev). If it is actually deployed to the server in the production environment, there is still a cross-domain problem. For example, the server port we deployed is 3001, which requires front-end joint debugging. The first step is that we can test the front-end production and development development separately. In config/ and that is, the development/production environment, the requested address API_HOST is configured separately. In the development environment, we use the proxy address API configured above, and the normal interface address is used in the production environment, so we configure this way.

 = merge(prodEnv, {
 NODE_ENV: '"development"',//Development environment API_HOST:"/api/"
})

 = {
 NODE_ENV: '"production"',//Production environment API_HOST:'""'
}

Of course, you can directly request it whether it is in the development or production environment. After the configuration is completed, the program will automatically determine whether it is currently developing or producing environment, and then automatically match API_HOST. We can use .API_HOST in any component to use the address such as

(.API_HOST+'user/login', )

Then the second step is to configure the cross-domain of the backend server, which is access-control-allow-origin: * Allow all accesses. In summary: In the development environment, our front-end can configure a proxy agent by itself to cross-domain. In a real production environment, the back-end cooperation is also required. A master said: This method ie9 and below are not good. If compatibility is required, the best way is to add a proxy to the server port on the backend, which is similar to the proxy of webpack during development.

Step 4:

<template>
<div>
  <ul>
    <li v-for="item in movieArr">
      <span>{{}}</span>
    </li>
  </ul>
  <button @click="sayOut">Rendering</button>
</div>
</template>
<script>
export default {
 data () {
  return {
    movieArr : []
  }
 },
 methods: {
   sayOut () {
     this.$('/api/v2/movie/top250')
    .then((response) => {
       ()
        =  // Here I want to emphasize this this arrow function refers to its parent, that is, vue instance, and then if you don't use the arrow function, this is an undefined, and it cannot be assigned to it. MovieArr. Please note here I have been cheated for a long time. I hope my friends will not be cheated.    })
   }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

The above problem solution to the cross-domain and rendering of axios in vue2.0 is all the content I share with you. I hope you can give you a reference and I hope you can support me more.