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遍历table中的元素示例代码
Jul 08 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
详解webpack自定义loader初探
Aug 29 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
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
PHP 数组入门教程小结
2009/05/20 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
质检员岗位职责
2013/12/17 职场文书
迟到检讨书800字
2014/01/13 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2014年度工作总结报告
2014/12/15 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
美术教师个人工作总结
2015/02/06 职场文书
大学教师个人总结
2015/02/10 职场文书
安全生产先进个人总结
2015/02/15 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android