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 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
理解javascript模块化
Mar 28 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP 采集心得技巧
2009/05/15 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python制作爬虫采集小说
2015/10/25 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
浅谈Python NLP入门教程
2017/12/25 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
java判断三位数的实例讲解
2019/06/10 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
校园门卫岗位职责
2013/12/09 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
python实现简单反弹球游戏
2021/04/12 Python