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 相关文章推荐
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 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/21 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python中PIL安装简单教程
2016/04/21 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python内置函数delattr的具体用法
2017/11/23 Python
Python科学画图代码分享
2017/11/29 Python
Django的分页器实例(paginator)
2017/12/01 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python读写csv文件的方法
2019/08/13 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
电气自动化自荐信
2013/10/10 职场文书
消防安全培训工作总结
2015/10/23 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript