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. [JAVA] Android用到的一些文件操作

    // 获得某个文件夹folderPath下面某种文件后缀fileType的所有文件名 public static List<String> getFileNamesInFolder(Str ...

  2. [WPF 基础知识系列] —— 绑定中的数据校验Vaildation

    前言: 只要是有表单存在,那么就有可能有对数据的校验需求.如:判断是否为整数.判断电子邮件格式等等. WPF采用一种全新的方式 - Binding,来实现前台显示与后台数据进行交互,当然数据校验方式也 ...

  3. linux chmod 给目录或文件赋权限 可读可写可执行

    前提:  mode权限设定字串,格式:[ugoa...][[+-=][rwxX]...][,...] 其中u表示拥有者(user),g表示与拥有者属于同一个群体(group),o表示其他以外的人(ot ...

  4. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  5. beego快速入门

    beego的官方网址:https://beego.me 参考文档:https://beego.me/quickstart 1:安装 您需要安装 Go 1.1+ 以确保所有功能的正常使用. 需要已经设置 ...

  6. Django有关的所有命令

    1. Django的安装 pip install django ==1.11.11 pip install -i yuan django==1.11.11 2. 创建项目 django-admin s ...

  7. [python]如何理解uiautomator里面的 child, child_by_text, sibling,及使用场景

    如何理解uiautomator里面的 child, child_by_text, sibling,我们借助android原生的uiautomatorviewer抓取的控件来进行理解 以如下图进行详细讲 ...

  8. 本博客已不再更新,新文章将发布在我的个人博客:https://www.tapme.top

    如题,本博客已不再更新,请访问个人博客:www.tapme.top

  9. swift类型擦除的定义-swift的类型擦除只是一个类型高低阶转换的游戏。

    所谓swift的类型擦除是指: moand转换: 通过技术手段(通常是包装器),将具体类型的类型信息擦除掉了,只将类型的(某一个侧面的)抽象信息(通常指的是类型尊从的协议.接口.或基类)暴露出来. A ...

  10. BZOJ5334:[TJOI2018]数学计算(线段树)

    Description 小豆现在有一个数x,初始值为1. 小豆有Q次操作,操作有两种类型:  1 m: x = x  *  m ,输出 x%mod; 2 pos: x = x /  第pos次操作所乘 ...