http-proxy-middleware

题图 From 极客时间 From Clm 前端开发者在工作中常常遇到跨域的问题，一般我们遇到跨域问题主要使用以下办法来解决: 1、jsonp 2、cors 3、配置代理服务器。 jsonp不是很灵活，只能发送get请求，不能发送psot请求，而cors虽然可以支持多种请求格式，但是如果请求携带cookie的话，还需要服务端和客户端分别配置一下，个人感觉也很麻烦。 相对于前两种，使用代理服务器解决跨域问题就简单了好多。 浏览器由于同源策略的原因，不同域名之间发送ajax请求，响应的数据不会被浏览器加载。而服务器向服务器发送请求则没有同源策略的限制。 下图便是代理服务器的原理了： 代理服务器只是起一个中转作用，配置代理服务器的方法有很多种，比如利用apache、nginx、tomcat等等，今天给大家介绍的是用nodejs配置代理服务器，用nodejs配置代理服务器，我们需要借助两个npm包，一个是web开发框架 express ，一个是express中间件 http-proxy-middleware 。 首先第一步我们先用express搭建两个服务器，一个静态资源服务器端口号为3000，一个接口服务器端口号为5000，静态资源服务器代码如下： var express = require ( 'express' ); var app = express(); app.use

距离上次更文有10个月的时间了，其实平时有总结很多技术点，但在掘金上只想发表关于前端工程化系列方面的文章，而又由于这段时间一直没有可落地的工程化项目（就是懒了🤦！），所以也不好在没有自己切身试验的情况下撰写博文。 OK，写这篇文章的契机呢，是因为我即将要做一个超级超级超级大项目，前期希望把前端基建的一些东西给搭建好，所以想着做一个脚手架工具，将基建的东西集成到模板中去，达到一个规范和提效的目的。其实这篇文章的重点并不是为了教大伙如何编写一个脚手架（掘金上关于这方面的教程太多），而是为了向你们安利我写的脚手架工具—— pandly-cli 😏。 正如标题所说， pandly-cli 最大的特色就是集成了 Element UI 、 View Design 、 Ant design 三大主流 UI 库供用户选择，并且还支持全局和按需的引入方式 。当然， pandly-cli 中不止这一个功能，还集成了很多提效的功能，文章后面会详细介绍。按照惯例，我还是先简单阐述下我写这个脚手架的心路历程。 脚手架 整体思路还是借鉴了 vue-cli2 的搭建模式（为什么不借鉴 vue-cli3 的？太复杂了！），然后自己做了点修改。整体目录结构如下： |-pandly-cli | |-bin # 命令执行文件 | | |-pandly # 主命令 | | |-pandly-create # 创建命令 |

同源策略 浏览器有同源策略，协议 域名 端口不同，就不能互相访问资源 实现跨域 jsonp cors postMessage Window.name http-proxy Document.domain JSONP 本地声明一个函数 function show ( data ) { console .log(data) } 复制代码 后段返回该函数的执行 < script src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=lol&cb=show" > </ script > // cb就是厚度返回的执行函数名 复制代码 //后端会返回 show({ p: false q: "lol" s: (10) ["lol官网", "lol手游", "lol转区", "lol是什么意思", "lol半价吧", "lol春季赛", "lol转区系统"] }) 复制代码 封装一个通用jonsp函数 //使用 jsonp({ url : 'xxx' , params :{ wd : 'xxx' }, cb : 'xx' }).then( res => console .log(data)) 复制代码 let jsonp = ( {url,params,cb} )=> { return new Promise ( (