webpack+vue-cil 中proxyTable配置接口地址代理

在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可:

dev: {

    // 静态资源文件夹
assetsSubDirectory: 'static', // 发布路径
assetsPublicPath: '/', // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
// 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
}, // 本地访问 http://localhost:8080
host: 'localhost', // can be overwritten by process.env.HOST

接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api,  因此接口地址需要写成这样的即可生效 /api/save/index。

注意: '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

webpack+vue-cil 中proxyTable配置接口地址代理的更多相关文章

  1. webpack+vue-cli中proxyTable配置接口地址代理详细解释

    在vue-cli项目中config目录里面的index.js配置接口地址代理,详细解释如下图所示:

  2. webpack+vue-cil跨域配置接口地址代理

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

  3. 在 Linux 中自动配置 IPv6 地址

    在 Linux 中自动配置 IPv6 地址 在本文中,我们将学习如何为 ULA 自动配置 IP 地址. 何时使用唯一本地地址 唯一本地地址unique local addresses(ULA)使用 f ...

  4. 如何修改Vue打包后文件的接口地址配置

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

  5. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  6. Vue实例中封装api接口的思路 在页面中用async,await调用方法请求

    一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时  接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...

  7. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

  8. vue项目中全局配置变量

    在项目中api管理需要用到全局变量,创建全局变量的方式也有很多. 1.通过export default const BASEURL = "http://localhost:3333/&quo ...

  9. vue 项目中实时请求接口 建立长连接

    需求:在项目中需要每隔五秒请求一次接口 第一种方法:直接在mounted钩子函数中处理 mounted() { window.setInterval(() => { setTimeout(thi ...

随机推荐

  1. Grafana+Prometheus系统监控之MySql

    架构 grafana和prometheus之前安装配置过,见:Grafana+Prometheus打造全方位立体监控系统 MySql安装 MySql的地位和重要性就不言而喻了,作为开源产品深受广大中小 ...

  2. ssh简单配置

    Port 2223Protocol 2HostKey /etc/ssh/ssh_host_rsa_keyHostKey /etc/ssh/ssh_host_dsa_keyKeyRegeneration ...

  3. 基于树莓派的智能家居项目的设想与实现 Hestia

    注:本人内容的准确性仅限于笔者写该篇文章时的情况,不保证后续与实际项目代码一致.实时内容还请关注Github项目托管页面:https://github.com/GenialX/hestia-serve ...

  4. Struts2-045验证脚本

    #! /usr/bin/env python # encoding:utf-8 import urllib2 import sys from poster.encode import multipar ...

  5. axios跨域

    参考:http://www.ruanyifeng.com/blog/2016/04/cors.html 遇到前后分离情况 前端 a.com 后端 server.a.com 环境 vue全家桶前端 ph ...

  6. Java面向对象回顾(1)

    世界万物皆对象. 面向对象四大特性:继承.封装.多态.抽象 Java中现有类,再有对象.创建对象(对象实例化)必须先创建类. 将对象的特征对应写成类的属性. 将对象的方法对应携程类的方法. 如何创建对 ...

  7. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  8. StringUtils工具类常用方法汇总1(判空、转换、移除、替换、反转)

      Apache commons lang3包下的StringUtils工具类中封装了一些字符串操作的方法,非常实用,使用起来也非常方便.最近自己也经常在项目中使用到了里面的一些方法,在这里将常用的方 ...

  9. Webpack飞行手册

    前言 在学习 Webpack 之前,我们需要了解一个概念:模块. 何为模块? 如果你曾学过 Java , C# 之类的语言,一定会知道 Java 中的 import 或 C# 中的 using 吧? ...

  10. 自己动手编写IOC框架(一)

    博客创建了2年多了,一直没敢写点东西,怕技术不够误导了别人.2年多后的今天我已经很有信心能够为需要帮助的人做点微薄的贡献了.这是我第一次写博客,先自我介绍一下.本人网名泪滴,一个非常伤心的名字,生活中 ...