AJAX跨域分析

产生跨域问题的原因

    1.浏览器限制

        很多人认为，发生跨域问题，是服务器后台不允许前台调用，进行了限制，这个观点是错误的。真正的原因是，当浏览器发现你的请求是跨域的时候，它会做一些校验，如果校验不通过，它就会报跨域安全问题。

        为了验证这个观点，我们发现当请求调用时，network中请求状态是200，也有返回值，这说明后台能够正常的处理我们的请求。

        然而控制台却会有报出跨域的问题。

  

  2.跨域

        我们的请求中：协议、域名和端口，任何一个不一样，浏览器都会出现跨域的问题。

  

  3.XHR（XMLHttpRequest）请求

        当我们再添加一个图片请求时

        但是，控制台只有一条报错。

        我们看一下network中，发现，新添加的请求type是json，由此可以看出，只有当请求类型是xhr是，才会出现跨域的问题。

解决思路

    1.针对浏览器限制

        通过修改浏览器的参数，让浏览器不做这个限制。但是这个方法意义不大，因为他需要客户端每个人都进行调整，这个不太现实。

    2.针对请求类型

        只要发出去的不是XHR请求，就不会产生跨域问题，针对这个思路，我们可以采用JSONP请求。JSONP是通过动态创建一个script标签，在script中发生请求。

     

    3.针对跨域

        然而基于JSONP的解决方案有很多弊端，他越来越无法满足现有的开发要求，所以用的越来越少了。所以解决跨域问题重点都是放在针对跨域的问题。

        这里有两种解决思路，一种是被调用方修改代码，让他支持跨域，支持基于HTTP协议关于跨域方面的要求而做的修改。也就是说在从A域名调用B域名的时候，在B域名返回的信息里边，加入一些字段，告诉浏览器，我允许A域名调用，那么浏览器通过校验，他就不会报跨域安全问题了，这是支持跨域的思路。

        那么，如果被调用方不是自己公司的，无法作上述的修改，那就需要第二种思路：调用方做修改。这种思路是隐藏跨域，被调用方修改是支持跨域，调用方修改是隐藏跨域。隐藏跨域就是通过代理，从浏览器发出的都是A域名的请求，在代理里边把制定的URL转到B域名里边，在浏览器看上去就是同一个域名，就没有跨域的问题，所以跨域的问题也可以解决。