vue引入axios同源跨域问题


Posted in Javascript onSeptember 27, 2018

前言:

跨域方案有很多种,既然我们用到了Vue,那么就使用vue提供的跨域方案。

解决方案:

1.修改HttpRequestUtil.js

import axios from 'axios'
 export var baseurl = '/api'
 /**
 * Get请求
 */
 export function get(url, callback){
  console.log('测试get请求')
  axios.get(baseurl+url)
  .then(function (response) {
   console.log(response)
   callback(response.data,true)
  })
  .catch(function (error) {
   console.log(error)
   callback(null,false)
  })
 }
 export default {
  get
 }

2.修改index.js

'use strict'
 // Template version: 1.3.1
 // see http://vuejs-templates.github.io/webpack for documentation. 
 const path = require('path') 
 module.exports = {
 dev: {
  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
  '/api': {
   target: 'http://127.0.0.1:8088',//设置你调用的接口域名和端口号 别忘了加http
   changeOrigin: true,
   pathRewrite: {
   '^/api': 'http://127.0.0.1:8088'//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
   }
  }
  },
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  autoOpenBrowser: false,
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  /**
  * Source Maps
  */
  // https://webpack.js.org/configuration/devtool/#development
  devtool: 'cheap-module-eval-source-map',
  // If you have problems debugging vue-files in devtools,
  // set this to false - it *may* help
  // https://vue-loader.vuejs.org/en/options.html#cachebusting
  cacheBusting: true,
  cssSourceMap: true
 },
 build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  /**
  * Source Maps
  */
  productionSourceMap: true,
  // https://webpack.js.org/configuration/devtool/#production
  devtool: '#source-map',
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or of
  bundleAnalyzerReport: process.env.npm_config_report
 }
 }
proxyTable: {
'/api' : {
target: 'http://127.0.0.1:8088' , //设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true ,
pathRewrite: {
'^/api' : 'http://127.0.0.1:8088' //这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
}
}
},

总结

以上所述是小编给大家介绍的vue引入axios同源跨域问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 #Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 #Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 #Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 #Javascript
vue-cli的工程模板与构建工具详解
Sep 27 #Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 #Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 #Javascript
You might like
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
问卷调查计划书
2014/01/10 职场文书
消防安全标语
2014/06/07 职场文书
中职生自荐信范文
2014/06/15 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL