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'; ...
随机推荐
- Mysql跨表更新
Mysql跨表更新一直是大家所关心的话题,本文介绍mysql多表 update在实践中几种不同的写法,需要的朋友可以参考下 假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Pr ...
- 第一章:认识Ajax
第一节:Ajax 简介 1,Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步JavaScript 和XML:2,Ajax 是异步交互,局部刷新:3,Aj ...
- 部署python django程序
在一台新的服务器上x需要先安装python3 ,git , 等 安装python3 安装python3 之前博客写过 创建虚拟环境,我用的是venv https://docs.python.org/ ...
- 函数和常用模块【day06】:subprocess模块(十)
本节内容 1.概述 2.前言 3.subprocess模块 4.subprocess.Popen() 一.概述 我们在实际的工作中,需要跟操作系统的命令做交互,但我们如何用python去跟操作系统之间 ...
- Hbase记录-Hbase调优参数
- java元注解 @Documented注解使用
@Documented 注解表明这个注解应该被 javadoc工具记录. 默认情况下,javadoc是不包括注解的. 但如果声明注解时指定了 @Documented,则它会被 javadoc 之类的工 ...
- Javaweb学习笔记——(六)——————xml中jaxp两种解析方式和dom4j运用
1.xml的scheam约束 dtd的语法:<!ElEMENT 元素名称 约束> **schema符合xml的语法,xml语句 **一个xml中可以有多个schema,多个schema使用 ...
- Linux TCP 连接数
查看 TCP 连接数 : 每一个 IP 访问的链接数:head 默认 前10 netstat -na|grep ESTABLISHED|awk '{print $5}'|awk -F: '{print ...
- “微信小程序商城构建全栈应用”开发小记
注意事项: 1.application\api\extra下的wx.php记得填写小程序的app_id.app_secret: 2.API测试小工具需要APPID:
- 第15月第6天 ios UIScrollView不能响应TouchesBegin
1. 1:@property MyScrollView *scrollView; 2:给MyScrollView,增加类别:MyScrollView+Touch 3:在类别里实现下面三个方法: @im ...