关于前端本地开发调试你需要了解的一切，跨域处理

布满荆棘的人生 2022-05-13 02:16 91阅读 0赞

## 关于前端本地开发你需要了解的一切 ##

下面关于前端开发我所有的了解的一些方法（方法无优劣，重要的你的习惯），有：

1.  前端发展起源之初的，模版语法（jsp，Nunjuck，PUG，vm等模版语法），jquery静态页面的方式连带后台代码一起跑，（联调一般前后端不分离），前后端一起联调，配置环境差异等。
2.  随着node 的发展 gulp, wepback, grunt 等相继问世，代理的方式，http-proxy方式
3.  利用抓包工具开发（一些安全性比较高的应用），使用[charles][], fiddler, 
4.  [Nginx反向代理解决前后端联调跨域问题，本地开发调整][Nginx]。
5.  关闭浏览器的跨域检查开发，（会因为忘记关闭而带来很多的问题）

### 1. 模版语法，前后端不分离开发 ###

前后端共同维护代码，配合一些模版语法，进行开发，或者 后台开启跨域模式联调（在不需要登录的情况下），效率很高，尤其是前后端是同一个人开发的时候，逻辑很联通。比如说jsp模版语法等

### 2. 代理的话 ###

先说 dva, create-react-app, vue-cli 等一系列的脚手架生成的配置都可以直接配置一些本地开发代理，配置原理还是httpServer的转发，这里介绍一个学习[webpack的中文地址][webpack]，在内搜索proxy就可以搜索到配置项详情使用规则

### 3. 利用抓包工具开发 ###

本人使用到了fiddler （windows）和 charles (mac) 、

### 4. [Nginx反向代理解决前后端联调跨域问题，本地开发调整][Nginx] ###

### 5. 关闭浏览器的跨域检查开发 ###

这里介绍一篇博客了解一下， 博客地址 [https://github.com/zhongxia245/blog/issues/28][https_github.com_zhongxia245_blog_issues_28]

说明一下遇到的一些问题，记得登录，登录之后记得带上withcredentials。

参考链接

1.  [Charles 从入门到精通][charles]
2.  [fiddler 快速入门][fiddler] ， [fiddler抓包原理][fiddler 1],

欢迎交流～

[charles]: https://blog.devtang.com/2015/11/14/charles-introduction/
[Nginx]: https://segmentfault.com/a/1190000010197683
[webpack]: https://webpack.docschina.org/
[https_github.com_zhongxia245_blog_issues_28]: https://github.com/zhongxia245/blog/issues/28
[fiddler]: https://blog.csdn.net/u011054333/article/details/54987525
[fiddler 1]: https://blog.csdn.net/wangjun5159/article/details/52198842