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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
解析coreseek for sphinx的使用
2013/06/21 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
javascript 获取图片颜色
2009/04/05 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
javascript操作符"!~"详解
2015/02/10 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python实现低通滤波器代码
2020/02/26 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
毕业生自我推荐
2013/11/04 职场文书
社区工作者先进事迹
2014/01/18 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年法务工作总结
2014/12/11 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
教师党员个人总结
2015/02/10 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
python数字图像处理之图像的批量处理
2022/06/28 Python