VueCli生产环境打包部署跨域失败的解决


Posted in Javascript onNovember 13, 2020

常见的跨域配置(/config/index.js):

proxyTable: {
 '/api': {
 target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名
 // secure: false, // 如果是https接口,需要配置这个参数
 changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
 pathRewrite: {
 '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
 }
 }
 },

使用:‘/api/getData'

在开发调试时,使用axios进行数据交互时没问题。但打包部署到服务器上发现404,跨域报错了。研究发现还需要进行配置一下。

config文件夹还有2个文件dev.env.js和prod.env.js 分别是开发环境和生产环境配置文件,我们需要分别进行修改。

VueCli生产环境打包部署跨域失败的解决

dev.env.js(开发环境)

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VUE_APP_BASE_API:'"/api"'
})
prod.env.js(生产环境)

module.exports = {
 NODE_ENV: '"production"',
 VUE_APP_BASE_API:'"http://192.168.xx:xxx"' //项目api地址
}

注意属性值里面要双引号,否则会报错(Unterminated string constant)。

配置好之后,程序会自动判断当前是开发还是生产环境,然后匹配VUE_APP_BASE_API。

VUE_APP_BASE_API可以通过process.env.VUE_APP_BASE_API来访问。

每次使用:process.env.VUE_APP_BASE_API+api地址 会很麻烦,这时我们可以设置axios的baseuURL。

一般我们会自己写个axios拦截器,生成一个axios对象,进行token等安全验证。再把这个对象引用到main,js,挂载在vue实例上。这里不做相关赘述,网上有很多。

生成axios对象设置baseURL:process.env.VUE_APP_BASE_API

这是我项目中axios拦截器部分代码

VueCli生产环境打包部署跨域失败的解决

设置后,记得重新启动项目。我们调用数据就可以省去process.env.VUE_APP_BASE_API了 ,直接写接口地址方法名字符串。

比如:this. $axios.get(process.env.VUE_APP_BASE_API+‘/getData' ) 变成 this. $axios.get(‘/getData' )

补充知识:vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

一、开发环境中跨域

使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。

不同域名之间的访问,需要跨域才能正确请求。

跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:

dev: { 
 env: require('./dev.env'), 
 port: 8080, 
 autoOpenBrowser: true, 
 assetsSubDirectory: 'static', 
 assetsPublicPath: '/', 
 proxyTable: {}, 
 cssSourceMap: false 
 }

只要修改里面的proxyTable: {}项

proxyTable: { 
 '/api': { //代理地址 
 target: 'http://10.1.0.34:8000/', //需要代理的地址 
 changeOrigin: true, //是否跨域 
 secure: false, 
 pathRewrite: { 
  '^/api': '/' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉 
 }
 }
}

然后重启项目npm run dev

请求数据时URL前加上“/api”就可以跨域请求了

self.$axios.get('/api/queryRole', {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里面内容如下

VueCli生产环境打包部署跨域失败的解决

这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名

VueCli生产环境打包部署跨域失败的解决

然后找到prod.env.js文件,如下:

VueCli生产环境打包部署跨域失败的解决

我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名

VueCli生产环境打包部署跨域失败的解决

2、在代码中调用设置好的参数:

比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:

VueCli生产环境打包部署跨域失败的解决

最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。

以上这篇VueCli生产环境打包部署跨域失败的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery教程ajax请求json数据示例
Jan 13 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
webpack3之loader全解析
Oct 26 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 #Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 #Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
vue print.js打印支持Echarts图表操作
Nov 13 #Javascript
vue 中使用print.js导出pdf操作
Nov 13 #Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 #Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 #Javascript
You might like
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python实现textrank关键词提取
2018/06/22 Python
python打开音乐文件的实例方法
2020/07/21 Python
python使用建议与技巧分享(一)
2020/08/17 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
销售会计工作职责
2013/12/02 职场文书
家长学校工作方案
2014/05/07 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
无线电通信名词解释
2022/02/18 无线电
Python何绘制带有背景色块的折线图
2022/04/23 Python
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js