使用nginx代理跨域,使用nginx代理bing的每日一图
前言
自从搞清楚了跨域原理后一直自鸣得意,感觉跨域没啥问题了。而事实上对关于跨域的几个header的理解也有限,但那又如何,我能做到跨域就行了。今天想把博客背景图改成bing的每日一图,发现遇到跨域问题。首先想到的就是自己写一个web,请求bing,然后传出结果,把自己的接口允许跨域。确实做到了,但是。我找了一台阿里云服务器,我安装了java,我编写了一个基于dropwizard的webservice。我需要写脚本去部署,确保系统稳定,挂了自动重启。我要写一堆的java代码来完成这件事。忽然想到nginx,于是一发不可收拾。
安装好Nginx
参阅 http://blog.rmiao.top/install-nginx-on-centos/
找到配置文件/usr/local/nginx/nginx.conf
新增代理路由
location ^~/proxy/bing/ {add_header 'Access-Control-Allow-Origin' 'http://localhost:8088';add_header 'Cache-Control' 'public, max-age=604800';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';rewrite ^/proxy/bing/(.*)$ /$1 break;proxy_pass https://cn.bing.com/;
}
浏览器访问自动代理
http://101.200.218.760/proxy/bing/HPImageArchive.aspx?format=js&idx=0&n=1代理对象为:
https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1
这是最简单的实现方案,但缺点是只能指定一个域名跨域。
如果我想增加多个origin怎么办
不要想用逗号隔开,这个不行,浏览器不允许。那么只能自己判断比较后插入一个合适的值。
server {listen 80;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;}location ^~/proxy/bing/ {set $cors "local";if ( $http_referer ~* "(https?://www\.cnblogs\.com/woshimrf[^\s]*)|(https?://api.rmiao.top[^\s]*)|(https?://blog.rmiao.top[^\s]*)|(http://localhost[^\s]*)" ) {set $cors "allow";}if ( $request_method = "OPTIONS" ) {set $cors "${cors}options";}if ( $cors = "allowoptions" ) {add_header 'Access-Control-Allow-Origin' "$http_origin";add_header 'Access-Control-Allow-Credentials' "true";add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';add_header 'Access-Control-Max-Age' 2592000;add_header 'Content-Length' 0;add_header 'Content-Type' 'text/plain, charset=utf-8';# indicate successful return with no contentreturn 204;}if ($cors = "allow") {rewrite ^/proxy/bing/(.*)$ /pub_cors/$1 last;}if ($cors = "local") {return 403;}}location ^~/pub_cors/ {internal;# Tells the browser this origin may make cross-origin requestsadd_header 'Access-Control-Allow-Origin' "$http_origin";# in a preflight response, tells browser the subsequent actual request can include user credentials (e.g., cookies)add_header 'Access-Control-Allow-Credentials' "true";add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';add_header 'Access-Control-Allow-Headers' 'reqid, nid, host, x-real-ip, x-forwarded-ip, event-type, event-id, accept, content-type';add_header 'Access-Control-Max-Age' 2592000;add_header 'Cache-Control' "public, max-age=604800";rewrite ^/pub_cors/(.*)$ /$1 break;proxy_pass https://cn.bing.com/; }#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
语法要点就不推测了。后面有机会认真学习下。不过,这里还是可以有几个语法参考的。
- 设置变量
set $cors "local";
- 正则表达式
location ^~/proxy/bing/ {
- 获取request的refer
$http_referer
- 获取request的method
$request_method
- 获取request的origin
$http_origin
- 变量的读取,包裹在引号里也可以,
add_header 'Access-Control-Allow-Origin' "$http_origin";
- 变量的读取,可以用大括号包裹,
set $cors "${cors}options";
- if 里的判断可以用正则,
~*
表示不区分大小写,匹配正则, 取反!~*
~
区分大小写,匹配正则, 取反!~
- 添加一个header,
add_header 'Access-Control-Max-Age' 2592000;
- 设置option的预检请求为204
- 跳转,
rewrite ^/proxy/bing/(.*)$ /pub_cors/$1 last;
, 分3部分,第一部分是正则,是匹配当前location的url的正则。 第二部分是映射的值,在第二部分里可以使用$1
来获得匹配第一个括号匹配的内容。 - if 里的判断可以用等号,
if ($cors = "allow") {
internal;
是不是只能内部访问?- 对于这种代理,尤其是bing这个,完全可以缓存掉。
add_header 'Cache-Control' "public, max-age=604800";
proxy_pass https://cn.bing.com/;
代理host,看样子下一步请求的host就是它,对于rewrite ^/pub_cors/(.*)$ /$1 break;
则是把匹配的$1
拼接到host之后。即,完成了转发操作。
确实比自己写Java web来做转发的好。
TODO 研究Nginx 配置文件的语法
上面的编写过程都是猜测出来的,没有看官方文档。英语不好就是不愿意看官网。后面有机会再研究具体语法。不过短期应该不会,很少用到nginx。到用到的时候再说吧。
TODO 正则表达式学习
虽然看了很多变正则表达式,但仅仅会写一个简单的基础模型。nginx里的配置让我看到了正则表达式的强大。什么时候深入学习一下呢?只能放到todo list里了,短期没时间规划。
参考
了解到怎么返回405:
- https://stackoverflow.com/questions/18970620/nginx-reject-request-if-header-is-not-present-or-wrong
照抄写的跨域方案:
- http://blog.csdn.net/oyzl68/article/details/18741057
最先看到的解决方案,虽然不合适:
- https://www.cnblogs.com/gabrielchen/p/5066120.html
唯有不断学习方能改变! -- Ryan Miao
使用nginx代理跨域,使用nginx代理bing的每日一图相关推荐
- nginx【nginx跨域、nginx开启gizp压缩、nginx服务器部署项目】
nginx是一个高性能的HTTP和反向代理服务器,它使用配置文件决定如何提供内容.要监听的端口等.因此常用来做静态资源服务器和后端的反向代理服务器. 安装:brew install nginx 启动: ...
- Nginx 解决跨域问题
什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 nginx解决跨域请求 nginx.config配置 server {listen 80;server_na ...
- proxytable代理不生效_proxyTable代理跨域使用详解
这次给大家带来proxyTable代理跨域使用详解,proxyTable代理跨域使用的注意事项有哪些,下面就是实战案例,一起来看一下. 什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允 ...
- 前端跨域,nginx反向代理的解决方案
前端跨域,nginx反向代理的解决方案 参考文章: (1)前端跨域,nginx反向代理的解决方案 (2)https://www.cnblogs.com/Yukiyi/p/7912223.html (3 ...
- 通过 Nginx 代理转发配置实现跨域(API 代理转发)
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...
- 使用nginx解决跨域问题
1.跨域解释 1.1 怎么知道我遇到了跨域问题 如果项目没做前后端分离,是不会有跨域问题的.前后端分离的项目中,前端调用后台服务时,报错 No 'Access-Control-Allow-Origin ...
- 虚拟主机3种方式nginx/apache+跨域知识点整理
目录 referer.prototype.array.json笔记整理: [http://t.csdn.cn/s4P8x](http://t.csdn.cn/s4P8x) 虚拟主机3种方式nginx/ ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- nginx解决跨域问题
在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题. 跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题 首先,在我们开始之前,首先要知道跨 ...
最新文章
- 来来来,你可能没见过这么全的实战吧
- 大二暑假周进度报告之四
- Tensorflow遇到的问题InvalidArgumentError: Graph execution error:2 root error(s) found.解决方法
- 服务器中显示存储设备,服务器节点信息集中显示方法、系统、设备及存储介质...
- modern php怎么网,Modern PHP
- Hibernate EHCache - Hibernate二级缓存
- jquery div无法获取html文件,怎么样用jquery在div中加载页面
- php控制器增删改查设计,控制器的增删改查操作
- 第11章 Spring Boot使用Actuator
- Vue练习(修改为自定义事件)
- 简单粗暴地理解 JS 原型链
- CoreBluetooth Central模式 Swift版
- Atitit 快速开发体系建设路线图
- 华工材料力学能用计算机吗,华南理工大学材料力学考研经验分享与资料.pdf
- ajax响应速度慢,jQuery Ajax请求的响应速度变化
- WordPress防止自动压缩jpg图片
- 电脑cpu怎么看 怎么看cpu好坏 (全文)
- 电子工程师英年早秃?离高阶茂密工程师你只差这套工具!
- Python转换excel文件,将xlsx文件转换为xls文件
- 哈工大计算机网络第一章——计算机网络概述复习
热门文章
- GDCM:检查二个dicom文件的BigEndian错误的测试程序
- ITK:读取网格并显示2个给定顶点之间的欧几里得距离
- ITK:查找图像的更高导数
- ITK:将数组转换为图像
- VTK:几何对象之PlaneSource
- OpenCV HDF和建立群组Group
- gitlab 开源项目 星_49必须了解的机器学习开源项目,Github上平均3600星
- 12.通过HTTP API对InfluxDB数据库作操作
- 13.4.虚拟化工具--jmap详解
- B04_NumPy从已有的数组创建数组(numpy.asarray,numpy.frombuffer,numpy.fromiter)