vue2.0 axios跨域并渲染的问题解决方法


Posted in Javascript onMarch 08, 2018

(用的脚手架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"'
}

当然不管是开发还是生产环境都可以直接请求http://api.douban.com。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,我们在任何组件里都能用process.env.API_HOST来使用地址如

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">
      <span>{{item.title}}</span>
    </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跨域并渲染的问题解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 #Javascript
Vue.js实现图片的随意拖动方法
Mar 08 #Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
实战node静态文件服务器的示例代码
Mar 08 #Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 #Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
发现的以前不知道的函数
2006/09/19 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python实现截屏的函数
2015/07/25 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
在python中bool函数的取值方法
2018/11/01 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
技术人员面试提纲
2013/11/28 职场文书
C++程序员求职信范文
2014/04/14 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书