vue2.0 axios跨域并渲染的难题化解措施,vue2.0axios

(用的脚手架vue-cli)

先是步: 在main.js中如下宣示使用

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

那么在其他vue组件中就足以this.$axios调用使用

其次步:在webpack配置一下proxyTable(config之下的index.js)

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'即可
}
}
},

第三步:

试一下,跨域成功了,不过注意了,那只是开拓条件(dev)中国化学工业进出口总公司解了跨域难点,生产处境中确确实实安排到服务器上只假如非同源依旧存在跨域难题,如作者辈陈设的服务器端口是3001,须求前后端联调,第一步前端我们得以分生产production和付出development三种情形分别测验,在config/dev.env.js和prod.env.js里约等于开拓/生产条件下分别铺排一下须求的地方API_HOST,开荒意况中我们用地点配置的代理地址api,生产条件下用不奇怪的接口地址,所以那样布置

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

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

自然不管是付出仍旧生育境况都足以间接呼吁

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

然后第二步后端服务器配置一下cros跨域就能够,正是access-control-allow-origin:*允许持有访谈的意思。综上:开荒的条件下大家前端能够协和布置个proxy代理就会跨域了,真正的生产条件下还亟需后端的卓殊的。某大神说:此措施ie9及以下糟糕使,假若急需相称,最佳的点子是后端在服务器端口加个代理,效果类似开辟时webpack的代办。

第四步:

<template>
<div>
  <ul>
    <li v-for="item in movieArr">
      {{item.title}}
    </li>
  </ul>
  <button @click="sayOut">渲染</button>
</div>
</template>
<script>
export default {
 data () {
  return {
    movieArr : []
  }
 },
 methods: {
   sayOut () {
     this.$axios.get('/api/v2/movie/top250')
    .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>

上述那篇vue2.0
axios跨域并渲染的难题化解方法正是作者共享给我们的全体内容了,希望能给我们贰个参照,也期待我们多多支持帮客之家。

axios跨域并渲染的主题素材化解情势,vue2.0axios
(用的脚手架vue-cli) 第一步: 在main.js中如下宣示使用 import axios
from’axios’;Vue.prototype.$axios=a…

(用的脚手架vue-cli)

vue-cli axios伏乞格局以及跨域管理

先是步: 在main.js中如下宣示使用

  • 安装axios
import axios from
'axios';
Vue.prototype.$axios=axios;
cnpm install axios --save

那么在其余vue组件中就能够this.$axios调用使用

  • 在要选用axios的文书中引进axios

其次步:在webpack配置一下proxyTable(config之下的index.js)

main.js文件 :import axios from 'axois'
要发送请求的文件:import axios from 'axois'
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'即可
}
}
},
  • 在config/index.js文件设置代理

第三步:

 dev: {   
  proxyTable: {// 输入/api 让其去访问http://localhost:3000/api
   '/api':{  
     target:'http://localhost:3000'//设置调用的接口域名和端口号 ( 设置代理目标)
   },
   '/api/*':{
    target:'http://localhost:3000'
   },
  changeOrigin: true,
   pathRewrite: { //路径重写 
      '^/api': '/' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://localhost:3002/user/add',直接写‘/api/goods/add'即可
    } 
  }  

试一下,跨域成功了,不过注意了,那只是开荒条件(dev)中国化学工业进出口总公司解了跨域难题,生产条件中的确铺排到服务器上万一是非同源照旧存在跨域难点,如小编辈陈设的服务器端口是3001,供给前后端联调,第一步前端大家能够分生产production和成本development二种景况分别测量检验,在config/dev.env.js和prod.env.js里也便是开辟/生产条件下分别布署一下央求的地址API_HOST,开辟景况中大家用地点配置的代理地址api,生产遭受下用正常的接口地址,所以那样安插

   
试一下,跨域成功,但是那知识开垦条件(dev)中国化学工业进出口总公司解了跨域难点,生产遭遇中正真陈设到服务器上倘若是非同源照旧存在跨域难题。

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


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

axios诉求方式

本来不管是付出依然生育情状都足以一向伸手

Get请求

instance.post(process.env.API_HOST+'user/login', this.form)
 // 向具有指定id的用户发出请求
  axios.get('/user?id=1001')
   .then(function (response) {
    console.log(response.data);
   }).catch(function (error) {
    console.log(error);
   });
  // 也可以通过 params 对象传递参数
  axios.get('/user', {
    params: {
     id: 1001
    }
   }).then(function (response) {//请求成功回调函数
    console.log(response);
   }).catch(function (error) {//请求失败时的回调函数
    console.log(error);
   });

接下来第二步后端服务器配置一下cros跨域就可以,正是access-control-allow-origin:*同意具有访问的情趣。综上:开辟的碰着下大家前端可以友善安插个proxy代理就能够跨域了,真正的生育境遇下还索要后端的合作的。某大神说:此方式ie9及以下倒霉使,倘若须要相称,最佳的章程是后端在服务器端口加个代理,效果类似开采时webpack的代理。

post请求

第四步:

  axios.post('/user', {
    userId: '10001' //注意post请求发送参数的方式和get请求方式是有区别的
   }).then(function (response) {
    console.log(response);
   }).catch(function (error) {
    console.log(error);
   });
<template>
<div>
  <ul>
    <li v-for="item in movieArr">
      {{item.title}}
    </li>
  </ul>
  <button @click="sayOut">渲染</button>
</div>
</template>
<script>
export default {
 data () {
  return {
    movieArr : []
  }
 },
 methods: {
   sayOut () {
     this.$axios.get('/api/v2/movie/top250')
    .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>

补充:

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注