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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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 中执行排序与 MySQL 中排序
2009/04/21 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
django解决跨域请求的问题
2018/11/11 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python sorted对list和dict排序
2020/06/09 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
保护环境的建议书
2014/03/12 职场文书
检讨书格式
2019/04/25 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
如何利用python创作字符画
2022/06/25 Python