NGINX解决第三方图片跨域问题

NGINX解决第三方图片跨域问题

项目场景：

前端页面展示第三方图片并需要对图片做编辑，当第三方图片服务不允许跨域时会产生跨域问题(CORS)，导致图片操作效果失败。同时需要解决第三方图片地址不固定的问题，需要用NGINX自动代理到图片原地址。

原因分析：

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

解决方案：

1.前端代码修改把第三方图片地址进行替换

原始图片地址：
192.168.1.1/pic?8dd611z2c-=s0931065c3614e-=t1i5m*=p4p9i=d1si4d667d8=*5b8i2e=
前端把原始地址替换：
192.168.2.5:80/crossOriginImg?referer=192.168.1.1/pic?8dd611z2c-=s0931065c3614e-=t1i5m*=p4p9i=d1s*i4d66*7d8=*5b8i2e=
把IP端口指定到本地同源的可以部署nginx的服务器，把源地址当作一个参数传到nginx进行解析，这样不需要提前知道第三方图片地址ip和端口。

2.配置NGINX

location ~/crossOriginImg {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;if ($args ~ "referer=(.*)"){set $newurl "$1";}proxy_pass  $newurl;proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header  Host $host;proxy_set_header  X-Real-IP $remote_addr;proxy_intercept_errors  on;error_page 301 302 307 = @handle_redirect;}
location @handle_redirect {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;set $saved_redirect_location '$upstream_http_location';proxy_pass $saved_redirect_location;
}

配置说明：
1.添加允许跨域的请求头

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

2.$args拿到地址中所有参数再正则匹配拿到原始图片地址，通过proxy_pass 代理到新的地址，这里不使用$arg_referer因为当图片地址有包含其他参数时会取不到完整的地址

if ($args ~ "referer=(.*)"){set $newurl "$1";
}
proxy_pass  $newurl;

3.为了解决原始图片会自动跳转到其他地址返回301时，在重定向的响应头中拿到跳转后地址$upstream_http_location，进行二次代理

location @handle_redirect {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;set $saved_redirect_location '$upstream_http_location';proxy_pass $saved_redirect_location;
}