vue-cli之webpack的proxyTable无效的解决方案
最近遇到这个需要单页访问跨域后台的问题
可以按照如下设置:
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}
遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。
1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器F12调试的时候看到的依然会是提示404。
并且注意,在F12看到的js提示错误的域名,是js写的那个域名,并不是代理后的域名。(l楼主就遇到这个问题,后端地址缺少了查询参数,代理设置为后端地址,然而F12看到的错误依然还是本地的域名,并不是代理后的域名)
2.就是要手动再执行一次npm run dev
vue-cli之webpack的proxyTable无效的解决方案的更多相关文章
- vue cli 3 lintOnSave 配置有时无效问题
一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...
- vue cli 3 & webpack-merge & webpack 3 & bug
vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
随机推荐
- js之string操作符
1.字符方法 // 输出索引值的字符 'zhangamie'.charAt(2) // "a" 'zhangamie'[2] //"a" // 输出编码 a的a ...
- P1282 多米诺骨牌
P1282 多米诺骨牌 题目描述 多米诺骨牌有上下2个方块组成,每个方块中有1~6个点.现有排成行的 上方块中点数之和记为S1,下方块中点数之和记为S2,它们的差为|S1-S2|.例如在图8-1中,S ...
- vue基础篇---class样式绑定
因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...
- JAVA-大白话探索JVM-运行时内存(三)
前面章节 JAVA-大白话探索JVM-类加载器(一) JAVA-大白话探索JVM-类加载过程(二) JVM运行时内存 通过之前的章节,我们知道.class类如何加载到内存中,如图红框 开始讲讲内存空间 ...
- POJ 2970 The lazy programmer
The lazy programmer Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 2785 Accepted: 70 ...
- bzoj千题计划307:bzoj5248: [2018多省省队联测]一双木棋
https://www.lydsy.com/JudgeOnline/problem.php?id=5248 先手希望先手得分减后手得分最大,后手希望先手得分减后手得分最小 棋盘的局面一定是阶梯状,且从 ...
- SmartUpload文件上传组件的使用教程
在项目中使用SmartUpload组件可以进行文件的上传和下载操作 使用步骤 1.导入jar包,进行build path操作 2.编写文件上传页面,代码如下 <form action=" ...
- 二、Internet地址结构
IP路由器实现的转发程序使用IP地址来识别流量去向.IP地址也表示流量来源. 2.1 IP地址的表示 IPV4地址通常采用点分四组或点分十进制表示法,如192.168.1.1. 点分四组表示法由四个用 ...
- 无线DOS攻击
1.无线连接状态 IEEE 802.11定义了一种客户端状态机制,用于跟踪工作站身份验证和关联状态.无线客户端和AP基于IEEE标准实现这种状态机制.成功关联的客户站停留在状态3,才能进行无线通信.处 ...
- Java EE之Struts2-2.5配置
开学以来,已经三周了.Java EE却不太走心,于是,这几日空杯心态,重新学习.复习了Java SE和Java Web开发技术,然后入手Struts2.为了使用最新版本的Structs2,我去官网下载 ...