Vue中跨域及打包部署到nginx跨域设置方法


Posted in Javascript onAugust 26, 2019

众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的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…

Vue中跨域及打包部署到nginx跨域设置方法 

选择download进去选择下载版本页面

Vue中跨域及打包部署到nginx跨域设置方法 

这里选择稳定版

下载即可

Vue中跨域及打包部署到nginx跨域设置方法

下载完成后目录如下

Vue中跨域及打包部署到nginx跨域设置方法

进入cong文件,打开nginx.congf文件,找到server对象里面的listen属性查看查看监听的端口号(默认80端口)

Vue中跨域及打包部署到nginx跨域设置方法 

在nginx根目下启动nginx.exe,如果出现一个黑窗口一闪而过,说明启动成功,访问localhost:80出现此页面则访问成功

Vue中跨域及打包部署到nginx跨域设置方法
Vue中跨域及打包部署到nginx跨域设置方法

如果访问不成功有可能是端口被占用,修改上面的端口号,重启nginx即可, 浏览器访问localhost:XXXX Vue项目部署在nginx上的配置 vue项目运行 npm run build 进行项目打包记得有本地静态资源文件的需要需要webpack配置, 如下:

config文件下的index.js文件找到build属性
assetsPublicPath: '/'  =>>>>>  assetsPublicPath: './'

Vue中跨域及打包部署到nginx跨域设置方法

build文件下的untils文件中找到vue-style-loader
增加 publicPath: '../../'

Vue中跨域及打包部署到nginx跨域设置方法 

此时打包后的dist文件可以不放置服务器环境下访问, 直接打开dist文件目录下的index.html就可以打开访问

这时候的静态资源都可以被加载出来,且不会报错,但是api访问的话还是会报错

 

Vue中跨域及打包部署到nginx跨域设置方法

 将打包后的dist文件里面的内容复制一份到nginx文件中的html文件中

Vue中跨域及打包部署到nginx跨域设置方法

打开html文件清空里面的内容,将复制的内容粘贴进去

Vue中跨域及打包部署到nginx跨域设置方法

Vue中跨域及打包部署到nginx跨域设置方法

进入cong文件,

打开nginx.congf文件,找到server属性在里面新增一条配置

location /api {proxy_pass http://localhost:4000/;}

Vue中跨域及打包部署到nginx跨域设置方法

你要访问那个地址这里就修改为你要访问的那个地址复制代码

Vue中跨域及打包部署到nginx跨域设置方法 

以上配置就全部完成啦

注意: 修改完nginx中的配置一定要重启nginx才可以, 切记!!!

nginx简单的操作命令

nginx.exe -s stop // stop是快速停止nginx,可能并不保存相关信息
nginx.exe -s quit // quit是完整有序的停止nginx,并保存相关信息
nginx.exe -s reload // 当配置信息修改,需要重新载入这些配置时使用此命令
nginx.exe -s reopen // 重新打开日志文件
nginx -v // 查看Nginx版本

以上就是我在项目中使用的配置啦,还有一些更高级的配置还没有接触使用到,供大家参考

总结

以上所述是小编给大家介绍的Vue中跨域及打包部署到nginx跨域设置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
字符串反转_JavaScript
Apr 28 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 #Javascript
JS阻止事件冒泡的方法详解
Aug 26 #Javascript
express框架中使用jwt实现验证的方法
Aug 25 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php addslashes 函数详细分析说明
2009/06/23 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
新三好学生主要事迹
2014/01/23 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
党建工作先进材料
2014/05/02 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
建国大业电影观后感
2015/06/01 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python