天天看点

前后端分离之nginx代理实现跨域

nginx代理实现跨域

前言:最近面试,总是被问到什么是跨域,怎么解决跨域之类问题。其实很苦恼,对于一个前端来说,比较难去模拟一个跨域的场景,不懂后台,怎么去得到一个真实的json数据呢?以下是个人的一些心得:

(其实一直以来一个人自学,进步不快,有时候遇到困难也很失落,最近通过慕课网,进步了很多,其实也是一个学习的途径,挺好的)

以下为跨域问题解决办法:

1.去慕课网观看《ajax跨域完全讲解》免费课程的,老师讲得超详细(分析了jsonp的不足,nginx的好处和使用)

2.按照视频的方法,在本地修改hosts文件,增加一条映射记录:127.0.0.1 b.com

3.按照视频的方法,配置nginx文件(见下图1)

4.在自己的电脑启动一个本地的服务器:启用windows的iis服务,即是(Win7、win10如何搭建IIS本地服务器网站:https://jingyan.baidu.com/article/2fb0ba40916a1c00f2ec5ff7.html)

为什么要启动本地的服务器呢?其实是模拟真实的数据请求场景,我们平时都是前端通过一个url向后台服务器请求数据的,如果前端的你,现在你如果不会后台的语言的话,最好就是用这个方法了。启动本地iis服务器,模拟和充当后台服务器,当请求发生时,能够返回数据。其实这个过程和实际的工作场景是一样的。在本地服务器的根目录创建一个data.json的数据,等下就可以通过ajax方法调用到了。(具体的调用方式,自己写一个html例子demo.html调用吧,直接用jquery的$.ajax()也比较方便)

5.启动nginx.exe

6.通过demo.html访问即可

其实不是很难,只是过程有点麻烦,如果看不懂的小伙伴,可以评论。可以给你提供源码,哈哈哈!

如有不妥处,请大神指出!

以下为nginx文件配置:图1

前后端分离之nginx代理实现跨域

实现跨域效果图:

前后端分离之nginx代理实现跨域

继续阅读