Vue中跨域及打包部署到nginx跨域设置方法
5星 · 超过95%的资源 136 浏览量
2021-01-19
16:59:19
上传
评论
收藏 558KB PDF 举报 
Vue中跨域及打包部署到中跨域及打包部署到nginx跨域设置方法跨域设置方法
众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数
据,而如果本地程序直接访问远程接口， 肯定会遇到跨域问题。
什么是跨域什么是跨域?实现跨域的多种方式实现跨域的多种方式?
这里我就不详细介绍了,大家自行百度哈
为什么要实现前端跨域为什么要实现前端跨域
一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,
一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口
vue项目中的配置项目中的配置
以vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 由于我们是在 开发环境开发环境 下使用，自然而然是要配置在dev里
面,找到 proxyTable属性,配置如下:
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
<!-- 使用proxyTable进行跨域设置 -->
proxyTable: {
'/api': {
target: 'http://www.abc.com', // 设置你调用的接口域名和端口号, 别忘了加http
changeOrigin: true, // 是否跨域
pathRewrite: {
// 这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
// 比如我要调用'http://www.abc.com/user/add'，直接写'/api/user/add'即可'
'^/api': '/'
}
}
},
// Various Dev Server settings
host: '0.0.0.0', // 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: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
上面proxyTable属性中的配置,效果就是将本地8080端口的一个请求代理到了http://www.abc.com这个域名下
'http://localhost:8080/api' ===> 'http://www.abc.com/'
注意: 以上设置只能在开发环境下使用,打包后会出现路径问题的 注意: Vue-cli提供的代理功能，只是让你在开发环境下使用
的，它(http-server-middleware)依赖于node环境，生产代码应该使用npm run build然后把dist放到nginx服务器上，在nginx上配
置代理地址 Vue项目部署到nginx上的跨域设置
这还没完，现在我们要将项目部署到nginx上，此时原来可以访问的接口又访问不到了，所以这个时候还要对nginx进行设置。
windows系统下载nginx 下载地址: nginx.org/en/docs/win…
weixin_38643401
- 粉丝: 5
- 资源: 954
最新资源
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
- 基于单片机的风力发电机转速控制源码
- 基于C++实现的风力发电气动平衡监测系统+源代码+测量数据(高分课程设计)
- 毕业设计- 基于STM32F103C8T6 单片机，物联网技术的太阳能发电装置+源代码+文档说明+架构图+界面截图
- 基于 LSTM（长短期记忆）（即改进的循环神经网络）预测风力发电厂中风力涡轮机产生的功率+源代码+文档说明
- 基于stm32f103+空心杯电机+oled按键+运动算法
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页