前言

自從搞清楚了跨域原理后一直自鳴得意，感覺跨域沒啥問題了。而事實上對關于跨域的幾個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的每日一图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。