缘起

哈喽大家周四好,趁着大家在团建的时候花一个下午学点儿东西,也是督促大家学习哟,希望大家看到老张的文章,可以有一丢丢的学习动力。不过话说过来,该吃的团建还是要去的,不能学我呀 [ /(ㄒoㄒ)/~~ ],昨天开始搭建公司的前后端分离项目,纠结是 Iview 还是 ElementUI ,百思不得其解,都说处女座纠结,我一个巨蟹为何如此,欢迎大佬们给出意见和建议~~~

开发 Vue 的时候,哪一种前端样式框架更好?

鉴于群里小伙伴问得最多的问题,这里找到Top3的其中之一,就是跨域问题(下次说说EFCore),当然这个问题是老生常谈的问题了,而且在之前的时候也已经说过了,不知道大家在使用的时候怎么样——坑来自于文章《框架之十二 || 三种跨域方式比较》。当然,大家会问了,既然都说过了,为何还要说呢,特别是使用 CORS 来实现跨域,很轻松,短短的几行代码就搞定了,但是或多或少会遇到这样的问题,1、把Http和 Https 搞混了,失败;2、如果是前端端口号不固定,会经常要后端配置端口号,麻烦;3、最重要的一点就是把我们的接口地址暴漏出去了,不爽;如果你不信,可以看看我之前自己的一个线上版本  http://vue.blog.azlinli.com/#/

虽然接口数据很正常被获取,但是接口地址还是不想暴露出去,欸?!那咋办,这就是说到了今天说的内容了,大家看我写的标题应该也能明白,⅖ 种方法—— 前边的三种方法已经说了,这里再重温下:

0、不跨域 —— 前后端写在一起,别笑,还真的有人已经把Vue 和 .net 整合到一起了,不说明

1、JsonP —— 在JQ中挺好,弊端也有,浅尝辄止

2、添加请求头 —— 需要后端来设计,不推荐

3、CORS —— 这个是我在跨域中遇到的神器,优缺点上边也说了,还是很不错的,推荐使用

4、webpack 本地代理 —— dev 环境的一大神器,只需在 webpack 中三行配置,即可代理到本地,只能在本地,大弊端,不过仍推荐使用

5、Nginx 反向代理 —— 完美解决 Build 后生产环境中的跨域问题,配合以后的负载均衡,强烈推荐

因为前三种跨域方法,已经在之前的文章中提到了《框架之十二 || 三种跨域方式比较》 ,这里就不多说了,今天主要说说 Webpack 的本地代理,和Nginx反向代理实现跨域,完全不用对后端进行操作;

最终我们的 博客项目一 的呈现的效果 http://vueblog.neters.club/:发现以及成功代理到本地了,并且是发布到服务器版本

一、基于webpack 的 proxy 代理——开发环境很方便

1、Vue-Cli 3.0 新增全局配置文件 vue.config.js

vue项目搭建的时候,会有一个全局config配置文件,在 vue-cli 2.0 脚手架中,很明显的把它放到了 config 的一个文件夹中,是这样的,我们在 index.js 中可以端口号的配置,打包之后路径的配置,图片的配置 等等

但是 vue-cli 3.0 脚手架中,去掉了 config 这个文件夹,那我们如何配置呢,我们可以在项目根目录新建一个 vue.config.js 文件,像之前的很多繁琐配置,都可以在这个文件里配置啦。官方说明,vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

我们就在根目录下新建该文件,然后添加内容:

module.exports = {
// 基本路径
baseUrl: "/",
// 输出文件目录
outputDir: "dist",
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require("os").cpus().length > ,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: true, //配置自动启动浏览器
host: "127.0.0.1",//主机
port: , // 端口号自定义
https: false,//是否开启https安全协议
hotOnly: false, // https:{type:Boolean}
proxy: null, // 设置代理 before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};

相应的注释都有,主要是配置 devServer ,从名字上也能看出来,这个是 dev 开发环境的服务配置,常用来配置我们的端口号 port ,还有一个就是 proxy 的设置代理。

2、配置 proxy 本地代理

将上边的 proxy: null 注释掉,然后修改代理设置:

     proxy: {
// 配置多个代理
"/api": {//定义代理名称
target: "http://123.206.33.109:8081",//我们的接口域名地址
ws: true,
changeOrigin: true,//允许跨域
pathRewrite: {
// 路径重写,
"^/apb": "" // 替换target中的请求地址,(这里无效,但是可以自定义处理)
}
}
},

这样,我们就把接口地址代理到了本地,那代理到本地,如何调用呢,请往下看。

3、修改接口api地址,http.js文件

还记得我们在 src 文件夹下有一个 api/http.js 文件么,这个就是配置我们的 http 请求相关的,其他的都不变,我们只需要把域名去掉即可,或者写上本项目的域名:

// 配置API接口地址
var root1 = "http://localhost:58427/api";//没有代理的本地api地址
var root2 = "http://123.206.33.109:8081/api/";//没有代理的服务器api地址
var root = "/api/";//配置 proxy 代理的api地址,也可以写成http://localhost:6688/api

其实说白了,就是在项目启动的时候,在node服务器中,是把所有的   /abi == http://localhost:6688/api 的都指向了 http://123.206.33.109:8081 域名,这样就实现了跨域

其他任何都不需要变,接口的使用还是原来的使用方法,这样,我们在本地开发的时候,就可以获取到后端api数据了,不用再去 .net core 中设置跨域CORS了,是不是很方便。

4、本地浏览效果

记得我们修改 vue.config.js 后要重启下服务,然后就可以看到项目成功获取数据,并代理到本地:

可以看到,我们已经把远程接口数据 123.206.33.109 成功的代理到了本地 localhost:6688 ,是不是很简单!

5、build 打包发布 IIS

那我们本地开发好了,是不是一切都稳妥了呢,我们可以试一试,通过 build 打包,生成 dist 文件夹,然后将文件夹拷贝到服务器,并配置 IIS ,这个很简单,就和配置普通静态页面是一样的,

我们发现虽然页面可以浏览(可以渲染,证明我们的 vue 已经生效),但是却获取不到数据,这证明我们上边的 proxy 代理,只是适用本地dev开发环境中:

截图

虽然这个本地代理的方法很简单,特别适合我们独立开发,在跨域这一块,完全不用和后端做处理,但是如何解决发布状态的呢,请继续往下看。

二、基于Nginx 的反向代理——打包发布一键搞定

这篇文章仅仅是如何使用 Nginx 作为一个反向代理服务器,具体的深入原理以及负载均衡器等等,我会在以后的微服务系列中说到(不知不觉又给自己玩了一个坑

从壹开始前后端分离 [.netCore 填坑 ] 三十三║ ⅖ 种方法实现完美跨域的更多相关文章

  1. k.tt 研究下生成的逻辑代码:从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建

    更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...

  2. 从壹开始前后端分离 [.netCore 填坑 ] 三十四║Swagger:API多版本控制,带来的思考

    前言 大家周二好呀,.net core + Vue 这一系列基本就到这里差不多了,今天我又把整个系列的文章下边的全部评论看了一下(我是不是很负责哈哈),提到的问题基本都解决了,还有一些问题,已经在QQ ...

  3. 从壹开始前后端分离 [.netCore 不定期更新 ] 三十五║ 完美实现全局异常日志记录

    缘起 哈喽我是不定期更新的日常,昨天群里小伙伴问到了记录日志,当然,以前我也挖过这个坑,后来一直没有来得及填上,也想着 swagger 一直又有错误信息展示的功能,就迟迟没有添加这个功能,不过昨天夜里 ...

  4. 采用异步来实现重新连接服务器或者重新启动服务 C#中类的属性的获取 SignalR2简易数据看板演示 C#动态调用泛型类、泛型方法 asp .net core Get raw request. 从壹开始前后端分离[.NetCore 不定期更新] 38 ║自动初始化数据库

    采用异步来实现重新连接服务器或者重新启动服务 开启异步监听,不会导致主线程的堵塞,在服务异常断开后一直检测重新连接服务,成功连接服务后通知各个注册的客户端! #region 检测断线并重连OPC服务 ...

  5. 从壹开始前后端分离[.NetCore] 37 ║JWT完美实现权限与接口的动态分配

    缘起 本文已经有了对应的管理后台,地址:https://github.com/anjoy8/Blog.Admin 哈喽大家好呀!又过去一周啦,这些天小伙伴们有没有学习呀,已经有一周没有更新文章了,不过 ...

  6. 从壹开始前后端分离[.netCore 不定期 ] 36 ║解决JWT自定义中间件授权过期问题

    缘起 哈喽,老张的不定期更新的日常又开始了,在咱们的前后端分离的.net core 框架中,虽然已经实现了权限验证<框架之五 || Swagger的使用 3.3 JWT权限验证[修改]>, ...

  7. 从壹开始前后端分离[.NetCore ] 38 ║自动初始化数据库(不定期更新)

    缘起 哈喽大家好呀,我们又见面啦,这里先祝大家圣诞节快乐哟,昨天的红包不知道有没有小伙伴抢到呢.今天的这篇内容灰常简单,只是对我们的系统的数据库进行CodeFirst,然后就是数据处理,因为这几个月来 ...

  8. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

随机推荐

  1. jquery的$.extend和$.fn.extend作用及区别/用span实现进度条/腾讯云IIS端口号修改

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...

  2. Javascript书籍推荐----(步步为赢)

    在此分享一些高清javascript书籍,因为我也没有全部看完,所以在这只是推荐,不同的书适合不同的人,所有的书在网上均有电子书,若找不到,请在博客留言,我有大部分书籍的电子稿.希望有更多的好书分享出 ...

  3. MySQL 开发实践

    最近研发的项目对DB依赖比较重,梳理了这段时间使用MySQL遇到的8个比较具有代表性的问题,答案也比较偏自己的开发实践,没有DBA专业和深入,有出入的请使劲拍砖!- MySQL读写性能是多少,有哪些性 ...

  4. 建立CMenu菜单项,实现选中菜单项点击左键响应事件

    这里我只是根据自己的项目做了一些总结,实现点击右键弹出菜单项,点左键选择菜单项: CMenu menu; VERIFY(menu.CreatePopupMenu());//新建一个cmenu菜单项 m ...

  5. 6种基础排序算法java源码+图文解析[面试宝典]

    一.概述 作为一个合格的程序员,算法是必备技能,特此总结6大基础算法.java版强烈推荐<算法第四版>非常适合入手,所有算法网上可以找到源码下载. PS:本文讲解算法分三步:1.思想2.图 ...

  6. H5移动端项目案例、web手机微商城实战开发

    自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...

  7. a标签跳转之前加点击事件

    ①在html标签中出现提示 <a href="http://www.baidu.com" onclick="if(confirm('确认百度吗?')==false) ...

  8. 死链接检查工具:Xenu 使用教程

    一.软件作用 Xenu 全称Xenu’s Link Sleuth,是一款英文软件,界面单一,功能简单,使用方法很容易掌握.虽然看起来简单,但Xenu却拥有强大的功能.Xenu可以对网站的内链进行详细的 ...

  9. 基本服务器的AAA实验

    一.实验拓扑 二.网络地址分配 三.不同网段互相PING通 PC-A ping PC-B PC-A ping PC-C PC-B ping PC-C 四.配置过程 (1)在路由器R1上配置本地用户账号 ...

  10. Spring+SpringMVC+MyBatis的pom.xml依赖

    <!-- 集中定义依赖版本号 --> <!-- 已经依据maven仓库给出的版本兼容信息,调节好合适的spring.mybatis-spring.mybatis.pagehelper ...