1、在 main.js 中,在引入 axios:

import axios from 'axios'
Vue.config.productionTip = false Vue.prototype.$axios = axios //将axios挂载在Vue实例原型上 // 设置axios请求的token
axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'
//设置请求头
axios.defaults.headers.post["Content-type"] = "application/json"

2、在 config/index.js 中,找到 dev 下的 proxyTable:

proxyTable: {
'/apis': {
// 测试环境
target: 'http://localhost:8000/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
}

3、调用的接口页面中,引入:

var api = '/apis/...'
this.$http.get(api).then(function(res) {
// 打印出来
   console.log(...)
},function(err) {
console.log(err)
})

vue 使用 proxyTable 解决跨域问题的更多相关文章

  1. vue webpack配置解决跨域问题

    现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...

  2. proxyTable 解决跨域问题

    1.使用 proxyTable(地址映射表)解决跨域问题(即通过设置代理解决跨域问题): 可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照 ...

  3. vue+nodejs+express解决跨域问题

    nodejs+express解决跨域问题,发现网上的大部分都是误导人,花了不少时间,终于弄懂了, 我在vue+nodejs+express+mongodb的项目里面,发现本地用vue代理正常调用远程的 ...

  4. vue反向代理解决跨域

    问题描述 在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http ...

  5. vue项目中解决跨域问题axios和

    项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安 ...

  6. vue.js vue-jsonp解决跨域问题

    安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组 ...

  7. vue.js 本地解决跨域

    1.config/index.js下添加proxyTable dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', ...

  8. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  9. vue 解决跨域问题

    1.后端处理允许跨域 2.反向代理跨域 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去去的网络信息.形象的说:它是网络信息的中转站. vue中设置代理: 1.config/in ...

随机推荐

  1. 最近见到一个用react native实现的标尺动画,不知道如何实现 帖两张图(新知食App)

    很恶心,这款App的标尺没有做兼容,我在模拟上看不到效果,无法说明我想做出的东西的效果,无奈粘一张图吧! 就是这么一个屌样子,如何实现?

  2. 基于纤程(Fiber)实现C++异步编程库(一):原理及示例

    纤程(Fiber)和协程(coroutine)是差不多的概念,也叫做用户级线程或者轻线程之类的.Windows系统提供了一组API用户创建和使用纤程,本文中的库就是基于这组API实现的,所以无法跨平台 ...

  3. ionic插件安装与卸载

    使用下面的命令查询.安装.卸载插件: $ ionic plugin list //列出所有已安装插件 $ ionic plugin remove 插件名 //先根据上面的list列出插件,然后根据插件 ...

  4. Django开发笔记(一)

    Django开发笔记(一) 标签(空格分隔): Django Python 1. 创建并运行Django项目 创建开发环境 安装Django pip install django==version 执 ...

  5. 破解 jar 包之直接修改 .class 文件方式

    一.常规 JAVA 软件破解流程 先讲一下常规jar包的破解流程. 1. 快速定位.          1) 通过procmon监控相关软件,查看程序都访问了些啥.         2) 用jd-gu ...

  6. mysql processlist 线程状态

        Analyzing 线程是对MyISAM 表的统计信息做分析(例如, ANALYZE TABLE ).   checking permissions 线程是检查服务器是否具有所需的权限来执行该 ...

  7. HTML5学习资料

    HTML5 的一些经典demo收集 Animated Books with CSS 3D Transforms 这是一个3D书本,CSS3完成 =========HTML5特效聚集网站======== ...

  8. Git如何永久删除文件(包括历史记录)

    有些时候不小心上传了一些敏感文件(例如密码), 或者不想上传的文件(没及时或忘了加到.gitignore里的), 而且上传的文件又特别大的时候, 这将导致别人clone你的代码或下载zip包的时候也必 ...

  9. MySQL基础之 统计函数总结

    五种统计函数:count().max().avg().min().max()函数 count()函数 count()函数在进行计算的时候,是分情况进行计算的,主要是一下两种 1.采用count(*)对 ...

  10. DOS 总结

    shutdown -s -t 30 指定在30秒之后自动关闭计算机. + L 返回登录页面 netstat 最近访问IP Regedit 打开注册表