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. go语言练习:通道、协程

    1.通道的简单例子: package main import "fmt" func main() { channel:=make(chan string) //创建了一个通道对象 ...

  2. Python3 sqlacodegen 根据已有数据库生成 ORM 使用的 model.py

    pip install sqlacodegen pip install pymysql sqlacodegen mysql+pymysql://username:password@127.0.0.1: ...

  3. 【SPL标准库专题(7)】 Datastructures:SplHeap & SplMaxHeap & SplMinHeap

    堆(Heap)就是为了实现优先队列而设计的一种数据结构,它是通过构造二叉堆(二叉树的一种)实现.根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做最小堆或小根堆.二叉堆还常用于排序(堆排序). 类摘 ...

  4. 在 Azure 中管理 Windows 虚拟机的可用性

    了解如何设置和管理多个虚拟机,以确保 Azure 中 Windows 应用程序的高可用性. 也可以管理 Linux 虚拟机的可用性. Note Azure 具有用于创建和处理资源的两个不同的部署模型: ...

  5. sqlserver sql优化案例及思路

    始sql: SELECT TOP 100 PERCENT ZZ.CREW_NAME AS 机组, ZZ.CREW_ID, AA.年度时间, CC.当月时间, DD.连续七天时间 AS 最近七天 FRO ...

  6. sql注入--mysql

    mysql数据库结构: 数据库A  --> 表名  --> 列名 --> 数据 数据库B  --> 表名  --> 列名 --> 数据 mysql数据库信息: my ...

  7. pam_frpintd.so 错误修复

    PAM unable to dlopen(/lib64/security/pam_fprintd.so): /lib64/security/pam_fprintd.so: cannot open sh ...

  8. WorldWind源码剖析系列:数学引擎类MathEngine

    PluginSDK中的MathEngine类是密封类.不可继承,主要完成通用的数学计算功能.由于按平面展开层层划分,所以在WW里用到一个row,col的概念,类MathEngine封装了从行/列到经/ ...

  9. 利用ngx_python模块嵌入到Python脚本

    导读 Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的开发. ...

  10. PAT A1004 Counting Leaves (30 分)——树,DFS,BFS

    A family hierarchy is usually presented by a pedigree tree. Your job is to count those family member ...