用nginx的反向代理机制解决前端跨域问题

什么是跨域以及产生原因

　　跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

上面已经说到，禁止跨域问题其实是浏览器的一种安全行为，而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成，但都少不了目标服务器做相应的改变，而我最近遇到了一个需求是，目标服务器不能给予我一个header，更不可以改变代码返回个script，所以前5种方案都被我否决掉。最后因为我的网站是我自己的主机，所以我决定搭建一个nginx并把相应代码部署在它的下面，由页面请求本域名的一个地址，转由nginx代理处理后返回结果给页面，而且这一切都是同步的。

　　首先找到nginx.conf或者nginx.conf.default 或者是default里面的这部份   

          

假如我们我们是http://abc.com/images/upload/jiandaoyun700.jpg 想请求http://static0.tuicool.com/images/upload/jiandaoyun700.jpg；

　　我们的ajax：

var url = 'http://abc.com/images/upload/jiandaoyun700.jpg'；
<br>$.ajax({
type: "GET",
url:url,
success: function(res){..},
....
})

　　再在刚才的路径中匹配到这个请求，我们在location下面再添加一个location。

#解决JS跨域问题

location ^~/images/upload/{

rewrite ^/images/upload/(.*)$ /images/upload/$1 break;
proxy_pass http://static0.tuicool.com;

}

　　

可以这么在浏览器里试一下效果：

http://abc.com/images/upload/jiandaoyun700.jpg

实际请求到的就是

http://static0.tuicool.com/images/upload/jiandaoyun700.jpg

贴上一份完整的NGINX配置

worker_processes  1;

events {

    worker_connections  1024;

}

 

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

 

    upstream backend {

             #ip_hash;

		server 127.0.0.1:8089 weight=1; 

		server 127.0.0.1:8080 weight=2;

		server 127.0.0.1:8889 weight=3;

         }

 

    server {

        listen       80;
	
	#配置域名泛解析
        server_name  abc.com www.abc.com ~^(?<subdomain>.+).abc.com$ ~^(?<subdomain>.+).m.abc.com$;

 	index index.html index.htm;

	set $root_path '/';

	root $root_path;

	#/images/2/bla_500x400.jpg 重写到 2.txt
	rewrite ^/images/(?<path>.+)/(.*)_(d+)x(d+).(png|jpg|gif)$ /$subdomain/$path.txt? break;

	location / {


	#反向代理的地址

	proxy_pass http://backend; 
		
	#设置主机头和客户端真实地址，以便服务器获取客户端真实IP

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    	}

	#解决JS跨域问题
	location ^~/images/upload/{

	rewrite ^/images/upload/(.*)$ /images/upload/$1 break;
	proxy_pass http://static0.tuicool.com;

	}
    }
}