Solution to the problem of vue2.0 axios cross-domain rendering

Below I will share with you a solution to the problem of vue2.0 axios cross-domain rendering. It has a good reference value and I hope it will be helpful to everyone.

(Scaffolding vue-cli used)

Step one: Use the following declaration in main.js

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

Then in other vue components you can call this.$axios and use

Step 2: Configure proxyTable(config in webpack index.js under)

dev:
 { 
加入以下
proxyTable:
{
'/api':
{
target:
'http://api.douban.com',//设置你调用的接口域名和端口号
 别忘了加http 
changeOrigin:
true,
pathRewrite:
 { 
'^/api':
'/'//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
 
比如我要调用'http://api.douban.com/v2/movie/top250'，直接写‘/api/v2/movie/top250'即可
}
}
},

##Step Three:

Try it, the cross-domain is successful, but please note that this is only a cross-domain problem solved in the development environment (dev). In the production environment, if it is actually deployed on the server, there will still be cross-domain problems if it is not from the same origin, as in our case The deployed server port is 3001, which requires front-end and back-end joint debugging. In the first step, we can test the front-end in two environments: production and development. In config/dev.env.js and prod.env.js, it is development/ In the production environment, configure the requested address API_HOST respectively. In the development environment, we use the proxy address api configured above. In the production environment, we use the normal interface address, so configure it like this

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://api.douban.com"'
}

Of course, you can directly request http://api.douban.com whether it is a development or production environment. After configuration, the program will automatically determine whether the current environment is development or production during testing, and then automatically match API_HOST. We can use process.env.API_HOST in any component to use addresses such as

instance.post(process.env.API_HOST+'user/login', this.form)

Then in the second step, the back-end server can configure cros cross-domain, which is access-control-allow-origin: * means allowing all access. To sum up: In the development environment, our front-end can configure a proxy to cross-domain. In a real production environment, we need the cooperation of the back-end. A certain expert said: This method is not easy to use in IE9 and below. If compatibility is required, the best way is to add a proxy to the server port on the backend. The effect is similar to the webpack proxy during development.

Step 4:

<template>
<p>
  <ul>
    <li v-for="item in movieArr">
      <span>{{item.title}}</span>
    </li>
  </ul>
  <button @click="sayOut">渲染</button>
</p>
</template>
<script>
export default {
 data () {
  return {
    movieArr : []
  }
 },
 methods: {
   sayOut () {
     this.$axios.get(&#39;/api/v2/movie/top250&#39;)
    .then((response) => {
       console.log(response.data.subjects)
       this.movieArr = response.data.subjects // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例 然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值 这里要注意一下 我被坑了半天 希望小伙伴不要被坑
    })
   }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

Related articles:

Solution to the option overlay problem of select in layui

Vue.js custom event Form input component method

Summary of several ways for vue to register components

The above is the detailed content of Solution to the problem of vue2.0 axios cross-domain rendering. For more information, please follow other related articles on the PHP Chinese website!