阿里P7架构师是如何解决跨域问题的！你有遇到吗？

时间 2019-12-06

原文原文链接

如今愈来愈多的项目就算是一个管理后端也偏向于使用先后端分离的部署方式去作，为了顺应时代的潮流，一先后端分离就产生了跨域问题，因此许多同窗把跨域和先后端分离项目联系在了一块儿，其实跨域产生的缘由并非先后端分离致使的，那咱们一块儿来看一下，但愿能够靠这一篇文章解答你们全部的跨域问题javascript

1、跨域产生的条件

使用xmlHttpRequest,即咱们一般说的ajax请求
浏览器作了这个事
访问的域名不一样，即访问的html页面是a域名下的，但内部js发送的ajax请求的目标地址倒是b域名

以上三个条件缺一不可，尤为是第三个条件许多作移动端的同窗可能都没有听过，由于移动端爽爽的用各类http请求狂发不一样的域名，可是浏览器不容许咱们这么作，为了一个词安全html

2、如何解决跨域问题

解决跨域问题的根本就是要打破上述的三个限制中的任何一个，咱们来看一下逐个击破的方式前端

JSONP方式

jsonp是打破第一重限制，用了XMLHttpRequest就跨域，那我不用这种方式了，咱们怎么作的，来看一段jquery的带jsonp的ajax请求java

$.ajax({
   type : "GET",
   url : "http://api.map.baidu.com/geocoder/v2/",
   data:"address=上海",
   dataType:"jsonp",
   jsonp:"callback",
   jsonpCallback:"showLocation",
   success : function(data){
	   alert("成功");
   },
   error : function(data){
   	   alert("失败");
   }
});

看似用了ajax请求，其实内部彻底不是那么回事，多了jsonp和jsonpCallback选项，它内部将代码翻译并把页面上的dom操做成这样jquery

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type='text/javascript'>
      // 后端返回直接执行的方法，至关于执行这个方法，因为后端把返回的数据放在方法的参数里，因此这里能拿到res。
      window.showLocation = function (res) {
        console.log(res)
        //执行ajax回调
      }
    </script>
    <script src='http://api.map.baidu.com/geocoder/v2/?address=上海&callback=showLocation' type='text/javascript'></script>
  </body>
</html>

这个时候，html页面的script src标签回去访问api.map.baidu.com的服务端，因为script，img这种标签浏览器是不受xmlhttprequest限制的，能够随意访问，这个时候对应的后端代码取得address参数，最后根据双方约定好的callback参数，返回一个被包装后的json，即nginx

showLocation({
	status: 0,
	result: {
		location: {
			lng: 121.4219317908279,
			lat: 31.361653367912695
		},
		precise: 1,
		confidence: 80,
		comprehension: 99,
		level: "道路"
	}
})

而后浏览器直接执行了对应的这个showLocation()… 等等，这个不就至关于执行了咱们上面定义的window.showLocation方法而且传入了咱们须要的json返回吗，那咱们的ajax success方法里就能够获得这个返回类型了，而且没有跨域，是否是很精妙。ajax

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）跨域资源共享 CORS 详解。这个玩样用于“破解”掉浏览器的限制，说是破解其实也是浏览器认识到了一些头部就放行了的意思，须要在http的response内多设置几个头部chrome

Access-Control-Allow-Origin:* 代表容许全部的origin（浏览器的html页面路径）访问，而并不是是同源的origin
Access-Control-Request-Method:* 代表容许全部的http request头，访问，由于浏览器在触发以下几个场景会在发送真正的数据前发送options这样的预检请求检测，一旦预检经过后才会发送真正的get或post数据请求，这个时候咱们按照cors的设置就须要容许对应的method访问，触发的几种状况包括 1:请求的方法不是GET/HEAD/POST 2:POST请求的Content-Type并不是application/x-www-form-urlencoded, multipart/form-data, 或text/plain 3:请求设置了自定义的header字段等
Access-Control-Allow-Headers:* 设置全部header都可以被容许，这个配置联通上述的request method options检测一块儿使用，能够在须要自定义header的场景下使用
Access-Control-Allow-Credentials：true 这个参数只有当须要跨域使用cookie传递时才须要设置为true，而且须要前端ajax配置使用xhrField:{withCredential:true}时才能传递cookie，另外safari和最新版本的chrome浏览器还须要在设置内放开对应限制，可参考个人秒杀课程,当这个参数被设置成true时候Access-Control-Allow-Origin就不能设置为*，不然就变成任何origin域都能容许传递cookie了，可将其调整为前端origin字段传什么我就用什么

若你使用的是nginx反向代理，则能够直接在nginx反向代理上配置json

location /{
	proxy_pass http://backendserver;

	add_header Access-Control-Allow-Methods *;
	add_header Access-Control-Allow-Credentials true;
	add_header Access-Control-Allow-Origin $http_origin;
	add_header Access-Control-Allow-Headers *;
	
}

代理法

打破不一样源的限制，我只要让它同源就能够了，好比要个人静态页面是 http://a.com/index.html 动态ajax请求访问的是http://b.com/api/***后端

我只须要将对应的服务部署在不一样的机器上，而后使用一个公共的c.com的域名做为nginx反向代理的入口域名，在将静态服务和动态服务分别挂在后面的被代理局域网服务器内，修改配置

server{
	listen:80;
	server_name: c.com;

	#静态资源
	location /{
		proxy_pass http://localhost:8080/;
	}

	#ajax动态请求
	location /api{
		proxy_pass http://localhost:8081/;

	}

}

这样就变成同源了

写在最后

第一：看完点赞，感谢您对做者的承认；
...
第二：随手转发，分享知识，让更多人学习到；
...
第三：记得点关注，天天更新的！！！
...