跨域问题的解决方法

现在的代码多是前后端分离开发，或是分布式应用，不可避免的会产生跨域问题，会在浏览器出现
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:9100’ is therefore not allowed access. The response had HTTP status code 400.
一、跨域问题产生的原因
跨域，是由于浏览器的同源策略，是一种浏览器（非浏览器访问不会有跨域问题）对javascript施加的安全限制，即浏览器不能执行其他网站的脚本。同源是指，http(协议):localhost(域名):8080(端口号)都相同，才能执行。浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
二、跨域方法的几个解决方案
1.通过nginx解决
1.nginx反向代理解决
nginx代理主要有两种，一是通过代理将接口的提供地址和接口的访问地址都写成nginx的地址
，然后再有nginx去转发真正要访问的地址。举个简单的例子
前端地址 http:localhost:8080/test1/cart 返回一个html页面，在其中的js文件发送ajax请求http:localhost:8090/test1/user的接口，由于端口号不同，会发生跨域问题
前端代码，发送ajax请求

function clickMe() {
			$.ajax({
				url: "http://localhost:8090/test1/user",
				type: "POST",
				dataType: "json",
				success: function(data) {
					alert(data);
				}
			});
		}

需要用nginx做代理，将两个不同域统一到一个域中。修改nginx中的配置文件nginx.conf

server{
		#nginx监听的端口，该端口不能被占用，否则nginx启不来了
		listen       9999;
		#nginx的域名（IP地址），这里是本机
		server_name  localhost;
		#访问的路径
		location /test1/cart {
		#路径被实际转发的地址
			   proxy_pass http://localhost:8080;
		}
		location /plugins {
			   proxy_pass http://localhost:8080;
		}
		location /test1/user {
			proxy_pass http://localhost:8090;
		}
   }

即页面上访问http://localhost:9999/test1/cart，实际访问的是http://localhost:8080/test1/cart，在ajax请求中同样访问http://localhost:9999/test1/user，这样就同源了，但实际上访问的是http://localhost:8090/test1/user 。
该方法需要修改前端ajax中的访问地址。
2.通过后端配置nginx解决（nginx版的CORS配置）
该方法无需修改前端代码，就是通过nginx在请求头中添加CORS的相关配置
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
网上找的一个配置，可以有效的
这篇博客中提到的关于add_header Access-Control-Allow-Origin *;这个是不是可以为 *号，估计是因为add_header ‘Access-Control-Allow-Credentials’ ‘true’;这个配置，这个配置是在请求中需要传递cookie时需要带上这个配置，不传递就不用，而当需要传递cookie时就需要获取访问的具体地址，不能是一个通配符
2.CORS（服务器端代码版），在代码中解决问题
CORS是一个W3C制定的标准，目前所有的浏览器都支持这个功能（IE10以下没有），只需要服务端实现这个标准即可，实现的方法就是在返回的信息中添加一些头信息，这个支持通配符的原则与上面的一样，即

@Autowraid
private HttpServletResponse response;

方法中添加这两句话
response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
response.setHeader("Access-Control-Allow-Credentials", "true");

或者使用springmvc（4.2以上）的CROS注解，在方法上添加如下注解

@CrossOrigin(origins="http://localhost:8080",allowCredentials="true")

上述支持当个方法支持跨域时使用。当然，想支持全局跨域的，可以通过自定义拦截器，再拦截器中加这两个请求头，可实现全局性的跨域。
这种方法的实现，会在浏览器发送请求时，先发送一个预请求，如果在预请求的回复中可以得到上述的请求头信息，即可以实现跨域，发送真正的请求，如没有该请求头，则跨域失败。