使用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";
# 推荐采用这样: valid_referers none blocked *.ttlsa.com server_names ~\.google\. ~\.baidu\.;
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 content
return 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 requests
add_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里了,短期没时间规划。
参考
http://www.ttlsa.com/nginx/nginx-referer/
使用nginx代理跨域,使用nginx代理bing的每日一图的更多相关文章
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- nginx代理跨域(mac)
首先找到nginx.conf文件,修改并添加如下配置 html 文件 <!DOCTYPE html> <html lang="en"> <head&g ...
- CORS跨域与Nginx反向代理跨域优劣对比
最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主 ...
- eclipse加速/Nginx配置跨域代理
下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...
- nginx解决跨域(前后端分离)
Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...
- 如何用Nginx解决跨域问题
一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...
- 利用Nginx设置跨域的方式
1.服务端可控,添加响应头 2.服务端不可控.通过Nginx反向代理 3.服务端不可控.通过Nginx反向代理添加响应头 第一种方法.服务端可控时,可以在服务器端添加响应头(前端+后端解决) 浏览器地 ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- 【linux】nginx options 跨域问题 请求HTTP错误405 用于访问该页的HTTP动作未被许可 Method Not Allowed
JavaScript JS 跨域问题 HTTP 错误 405 - 用于访问该页的 HTTP 动作未被许可HTTP 错误 405.0 - Method Not Allowed Nginx 处理跨域问题. ...
随机推荐
- Vue源码学习02 初始化模块init.js
接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是 ...
- 浅析Java源码之LinkedList
可以骂人吗???辛辛苦苦写了2个多小时搞到凌晨2点,点击保存草稿退回到了登录页面???登录成功草稿没了???喵喵喵???智障!!气! 很厉害,隔了30分钟,我的登录又失效了,草稿再次回滚,不客气了,* ...
- Eclipse 枚举类报错
当你写一个枚举类时,如果没有在枚举类的第一行写有哪些枚举值,那么就会出现编译报错:Syntax error on token "String", strictfp expected ...
- SQL Server 数据类型转换函数
T-SQL提供了两个显示转换的函数:CAST函数和CONVERT函数. 1. CAST函数 语法: CAST ( expression AS data_type [ ( length ) ] ) 示例 ...
- onload、DOMContentLoaded与性能问题
onload.DOMContentLoaded与性能问题 onload事件 DomContentLoaded 1.onload事件 onload事件一般在所有的文档内容加载完成后触发,如果网页中图 ...
- transform 各种影响
1.提升元素的z-index层级,下面这个例子会让前面的图片显示在上面,一般来说应该是后面的覆盖前面图片的 <img src="mm1" style="-ms-tr ...
- linux DHCP安装和测试
1.Yum 安装DHCP服务 2.拷贝模板配置文件,方便后期的配置修改. cp /usr/share/doc/dhcp-4.1.1/dhcpd.conf.sample /etc/dhcp/dhcpd. ...
- ASP.NET Core中的OWASP Top 10 十大风险-失效的访问控制与Session管理
不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: https://dotnetcoretutorials.com/201 ...
- 小米/红米导入VCF联系人乱码问题解决
PS:尽量不要用什么豌豆荚啊.微信啊.QQ啊之类的通讯录备份,那就等于把自己的通讯录免费送给腾讯他们了....还是自己手动的好一些,但是小白用户或者经常丢手机的卖就卖吧,总比联系人都丢了要好~~~ 默 ...
- MYSQL触发器在PHP项目中用来做信息备份、恢复和清空
案例:通过PHP后台代码可以将员工的信息删除,将删除的员工信息进行恢复(类似于从回收站中恢复员工信息),并且还可以将已经删除的员工进行清空(类似于清空回复站的功能). 思路:要有一张员工表,还要有一张 ...