代理方式解决跨域问题

代理方式工具有多种，这里使用常用的nginx举例，nginx代理解决跨域原理其实很简单，从浏览器同源策略的限制角度考虑，通过代理方式将前端页面和后端接口代理成为同源服务（即浏览器访问前端页面和后端接口的ip主机相同、port端口相同），这样前端页面请求接口时就不会因为同源策略限制出现跨域问题。例如：

nginx配置，将前端页面代理为localhost:80地址，将后端接口代理为localhost:80/apis地址，那么浏览器就会以为前端页面和后端接口同源。

注意：因为nginx配置代理路径时，对Windows路径支持不太好，因此root路径最好使用相对路径。

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
 
    server {
        listen       80;
        server_name  localhost;
		charset UTF-8;
		location / { # 这里配置前端页面代理
            root   html;
            index  index.html index.htm;
        }
        location /apis { # 这里配置后端接口代理
            proxy_pass http://localhost:8080/;
        }
    }
}

前端页面JavaScript配置，经过上面nginx代理，现在前端页面地址通过 http://localhost/具体页面路径 访问，页面ajax请求接口地址也要换成nginx代理后的http://localhost/apis/具体接口地址 来访问，这样浏览器在调用的时候才会没有同源限制。
 

<h3 id="h3">hello crossorigin</h3>
<script type="text/javascript">
	$("#h3").click(function() {
		alert("请求");
		$.ajax({
			url:"http://localhost/apis/crossorigin", # 这里使用的是nginx代理后的接口路径
			success:function(data) {
				alert("Data: " + data);
			}
		});
	});
</script>