vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
一、开发环境中跨域
module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
只要修改里面的 proxyTable:{} 项
module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://yapi.demo.qunar.com',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/mock/62499/api', // rewrite path
},
}
}, // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
target下的是根地址
然后重启项目npm run dev
请求数据时URL前加上“/api”就可以跨域请求了
axios.post('/api/login', {params: params})
.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
})
1、参数proxyTable详解:
vue-cli的config文件里的参数:proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1
,可以按照如下设置:
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'
}
}
}
vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github:https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。
2、pathRewrite含义
用代理,首先你得有一个标识,告诉他你这个连接要用代理,不然的话,可能你的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。'/iclient': {}
, 就是告诉node
,我接口只要是'/iclient'
开头的才用代理。所以你的接口就要这么写 /iclient/xx/xx
。最后代理的路径就是http://xxx.xx.com/iclient/xx/xx
。可是不对啊,我正确的接口路径里面没有/iclient
啊,所以就需要 pathRewrite,
用'^/iclient':''
, 把'/iclient'
去掉,这样既能有正确标识,又能在请求接口的时候去掉iclient
。当然如果本身的接口中就有/iclient,那么就可以把pathRewrite这个参数去掉。
二、在生产环境中跨域
设置nginx配置文件:
location /api {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://fanyi.baidu.com/v2transapi;
}
三、设置不同的接口地址
平常我们团队开发时都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题。
在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口。
1、设置不同的接口地址
先找到以下文件
/config/dev.env.js
/config/prod.env.js
可以看到dev.env.js里面内容如下
这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名
然后找到prod.env.js文件,如下:
我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名
2、在代码中调用设置好的参数:
比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:
最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。
vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址的更多相关文章
- vue-cli3.0本地代理cookie跨域请求Nginx配置
由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据, 经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Ngi ...
- nginx反向代理实现跨域请求
nginx反向代理实现跨域请求 跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器端代码进行配合,稍显麻烦通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 示例服务器A ...
- VUE线上通过nginx反向代理实现跨域
1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...
- .NET 反向代理 YARP 跨域请求 CORS
使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...
- iview-cli 项目、iView admin 代理与跨域问题解决方案
iview-cli 项目.iView admin 跨域.代理问题解决方案 在webpack.dev.config.js文件中: 添加: devServer: { historyApiFallback: ...
- 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri
最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...
- Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...
- vue开发环境和生产环境里面解决跨域的几种方法
什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
随机推荐
- Android Call requires API level 19 (current min is 15)
在 Android 应用开发时候,配置文件中声明了支持的Android系统范围: minSdkVersion 15targetSdkVersion 27 但是代码中需要使用的一个类 (android. ...
- 创建线程时如果既传入了runnable对象,又继承thread重写了run方法,会执行的哪里的代码
1 使用线程的方式,继承thread类,重写run方法 new Thread() { @Override public void run() { System.out.println("我是 ...
- 使用TTS实现Oracle跨版本迁移
TTS实现数据库迁移,具有速度快.支持跨平台和跨版本等优点.本文记录了用TTS从10g single迁移到11g RAC的过程. Source数据库版本和字符集设置: SQL> select * ...
- mysql 数据库磁盘占用量统计
查看某个表的磁盘占用量 select (data_length+index_length)/1024/1024 M from information_schema.tables where table ...
- python日志等级输出删选
有时候我们会删选一下输出的信息 当做日志进行文件保存 但是我们程序中有可能有自己不想存到日志文件中的输出信息 我们要做一些的删选 然后进行保存 代码如下: #!/usr/bin/python # - ...
- Recurrent Neural Network[survey]
0.引言 我们发现传统的(如前向网络等)非循环的NN都是假设样本之间无依赖关系(至少时间和顺序上是无依赖关系),而许多学习任务却都涉及到处理序列数据,如image captioning,speech ...
- BZOJ3309 DZY Loves Maths 莫比乌斯反演、线性筛
传送门 推式子(默认\(N \leq M\)): \(\begin{align*} \sum\limits_{i=1}^N \sum\limits_{j=1}^Mf(gcd(i,j)) & = ...
- 前后端分离的利器:fiddler的实用功能举例
# 前后端分离的利器:fiddler的实用功能举例 ##what's fiddler fiddler是一款代理软件,对于前后端分离开发非常重要.可以说,如果前端开发没有用上fiddler或类似软件,那 ...
- 教你使用HTML5原生对话框元素,轻松创建模态框组件
HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...
- 领域驱动设计(DDD:Domain-Driven Design) 介绍
Eric Evans的“Domain-Driven Design领域驱动设计”简称DDD,Evans DDD是一套综合软件系统分析和设计的面向对象建模方法,本站Jdon.com是国内公开最早讨论DDD ...