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'; ...
随机推荐
- xargs与exec详解
一.场景 这个命令是错误的 1 find ./ -perm +700 |ls -l 这样才是正确的 1 find ./ -perm +700 |xargs ls -l 二.用法 1 2 3 4 5 ...
- 强大的svg操作库——Raphael
先常规先引入Raphael库: <script src="raphael.js" type="text/javascript"></scrip ...
- mysql表备份的一种方式
前提: 最近测试环境shop表经常出现表损坏不能正常查询,通过mysql的修复方法,暂时有效.故做该表的迁移操作. 思路是: 停止数据库的操作 1.备份老表. 2.创建一个结构一样的表. 3.将老表 ...
- mySQL数值类型的取值范围
如下图,int最大为2145483647,手机号码应该用bigint
- numpy笔记—ravel和c_命令(区别flatten)
np.c_给numpy数组添加列 np.r_给numpy数组添加行 ravel(): 将多维数组降成一维, 返回的是视图
- Jmeter调用 Json接口测试之关键点申明Content-Type类型
背景: 最近,在做接口测试发现创建运单接口,通过普通表单请求总是失败,开始我以为是后端接口出现问题,但通过前端页面都能创建运单,F12打开浏览器开发者模式,获取该接口请求入参发现,请求的数据格式是js ...
- Jquery中click事件重复执行的问题
平常没注意事件绑定问题,在此注意一下: function testClick(obj){ $("select").off().on("click", funct ...
- C# 生成一个带数字的饼图
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D ...
- pytorch中如何使用DataLoader对数据集进行批处理
最近搞了搞minist手写数据集的神经网络搭建,一个数据集里面很多个数据,不能一次喂入,所以需要分成一小块一小块喂入搭建好的网络. pytorch中有很方便的dataloader函数来方便我们进行批处 ...
- Database学习 - mysql 数据库 事务操作
事务 事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功. 数据库开启事务命令: start transaction 开启事务 rollback 回滚事务,即撤销指定的 ...