使用nginx实现纯前端跨越
- 你是否厌倦了老是依赖后台去处理跨域,把握不了主动权
- 你是否想模仿某个app倒腾一个demo,却困于接口无法跨域
那么很幸运,接下来我将现实不依赖任何后台,随心所欲的想访问哪个域名就访问哪个!
下载nginx
地址: http://nginx.org/en/download.html
注意: 存放目录中不能含有中文
nginx配置
强大的nginx反向代理工具,有很多东西值得我们去研究,这里我只贴出核心代码,其他的还有待深入。例如我想做一个豆瓣的高仿app,调用 搜索图书接口
本地电脑ip:192.168.1.168
本地React工程访问地址:192.168.1.168:404
实现跨域后React工程访问地址:192.168.1.168
实现跨域后豆瓣接口调用的地址: //192.168.1.168/douban/v2/book/search?q=解忧杂货店&tags=12
nginx.conf server
完整配置文件
https://github.com/helijun/react-learn/blob/master/nginx/conf/nginx.conf
启动nginx
将上面的配置文件替换你本地的nginx.conf
更改ip地址,server监听端口
cd到nginx存放的根目录
start nginx.exe
到此为止,大功告成,没错就是这么简单。测试效果:
另外附上nginx常用的几个命令
start nginx.exe //启动
nginx.exe -s reload //重启
nginx.exe -s stop //快速停止
nginx.exe -s quit //完整有序停止
总结
其实前端跨域问题在现在的前后端分离的项目中,应该是说普遍存在的,之前也写过相关的文章总结 jsonp跨域请求、优雅的封装ajax,含跨域,但是都基本上是要后台配合的,并且还有很多局限性。那么现在这种方式,就真的很随心所欲的,比如我现在还想代理到百度的api,那么只要在那个server中再添加一个location即可,如:
location /baidu {
rewrite ^/baidu/(.*)$ /$1 break;
proxy_pass https://api.baidu.com;
}
注意事项
或许你发现了,所有的请求都添加了一个'douban'前缀,那么在真实的项目中,务必将这个前缀设置为一个变量,然后所有的ajax请求url都拼接这个前缀,防止后续如果有变更导致牵一发而动全身。
固定ip
为了防止ip变化导致nginx配置失效,我这里固定ip为 192.168.1.168
打开网络和共享中心->本地连接->属性->双击Internet协议版本4(TCP/IPv4)属性
使用nginx实现纯前端跨越的更多相关文章
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- Sharepoint页面项目展示画廊纯前端实现,后端用list/library简单维护
需求背景: Sharepoint页面项目展示画廊.图片+文字,要求图片与文字用Sharepoint Library维护,然后在sharepoint页面上被调用,生成项目展示画廊. 解决方案(纯前端), ...
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- react纯前端不依赖于打包工具的代码
####react最基础的语法和不依赖环境的纯前端免编译代码 参照:http://www.ruanyifeng.com/blog/2015/03/react.html 注意事项:1.必须放倒服务器上, ...
- Web纯前端“旭日图”实现元素周期表
一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...
- 纯前端导出pdf文件
纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...
- 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法
近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...
- HTML实现包含公共部分:通过ECMA6的模块化,纯前端实现类似jsp:include的功能
以前一直是用 jsp:include 的方式来引入 html 头部的公共部分 php也有类似的方式 但以上两种,个人感觉都并不纯粹,本着折腾的精神,优化原有代码,解耦合 使用 ECMA6 的模块化方式 ...
随机推荐
- javascript编码规范总结
1.嵌入规则 Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来.Javas ...
- UESTC 30 &&HDU 2544最短路【Floyd求解裸题】
最短路 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Python网络数据采集2-wikipedia
Python网络数据采集2-wikipedia 随机链接跳转 获取维基百科的词条超链接,并随机跳转.可能侧边栏和低栏会有其他链接.这不是我们想要的,所以定位到正文.正文在id为bodyContent的 ...
- 找不到包含 OwinStartupAttribute 的程序集。 - 找不到包含 Startup 或 [AssemblyName].Startup 类的程序集。
打开web.config添加 <add key="owin:appStartup" value="false" /> <add key=&qu ...
- HtmlCleaner CleanerProperties 参数配置(转自macken博客,链接:http://macken.iteye.com/blog/1579809)
HtmlCleaner CleanerProperties 参数配置 Parameter Default Explanation advancedXmlEscape true If this para ...
- centos 系统常用命令
一:查看cpu信息more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo ...
- Struts2框架入门
1.1 Struts2概述: 是一个遵循WEB层规范的MVC设实现,该框架基本上借鉴了WebWork框架的体系结构,只吸收了少部分Struts1的优点.是目前JAVA EE项目中WEB层事实上的工业标 ...
- 云端TensorFlow读取数据IO的高效方式
低效的IO方式 最近通过观察PAI平台上TensoFlow用户的运行情况,发现大家在数据IO这方面还是有比较大的困惑,主要是因为很多同学没有很好的理解本地执行TensorFlow代码和分布式云端执行T ...
- windows 注入 之 SetWindowHookEx
前面的项目用到hook 还是在半年前,没想到最近有用到了,说实话,在项目组就提出,能用别的办法还是不要用这种,毕竟不太正道(感觉哈). 最近又牵扯到第三方对接的任务,没办法我又回到了HOOK上了.与窗 ...
- 浅谈分析表格布局与Div+CSS布局的区别
(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...