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代码
Mar 06 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 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
Destoon模板制作简明教程
2014/06/20 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
分享python数据统计的一些小技巧
2016/07/21 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python中删除某个元素的方法解析
2019/11/05 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
sort命令的作用和用法
2012/11/04 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
工作表扬信的范文
2014/01/10 职场文书
党风廉设责任书
2014/04/16 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2015年暑假生活总结
2015/07/13 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
入门学习Go的基本语法
2021/07/07 Golang
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS