ajax跨域的另类解决方案

跨域问题在前端开发中是比较常见的一个问题，也许有些小伙伴在实际项目开发过程中并没有碰到这块的问题，但是大家都知道解决跨域问题的几个方法，比如常见的jsonp以及html5中的XHR2

跨域的概念

来自百度百科：AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，具体什么是不同域，这里就不做介绍了。
[xhr2相关介绍][http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html]
我今天所说的是在平时代码调试过程中如何处理ajax跨域访问的问题，在日常的项目开发过程中经常会有前端工程师和后端工程师分工合作进行程序的调试，前端程序员a在本地开启了一个服务：127.0.0.1:8080/project/yourCode，他需要和后端b同学进行接口的调试，然后b同学的ip地址为192.168.1.123：8080，然后a同学将ajax请求的服务器地址改为b同学的ip地址，接着a同学进入页面进行ajax请求的发送，结果有点悲剧，为啥没有数据回来了，打开控制台，页面报错信息提示403 禁止访问 或者提示405禁止http请求 ，这时候a同学忽然明白了，根据所学知识a在自己电脑上对b同学的电脑进行ajax请求，这个属于跨越访问，b同学的网站默认会拒绝一切不是同源的http请求。。。难道要把ajax请求的方式改为jsonp吗 仔细斟酌思考了下，a同学放弃了这个想法，第一：工作量比较大，并且没有必要，以后代码还是要合入一个项目中的，就不会存在当前的这个问题了 第二：jsonp只适合get请求。。。最终a同学找到了解决方法，即解除浏览器的跨越限制。

解除chrome浏览器的跨越访问限制

找到你chrome 右键属性 进入快捷方式 在目标处后面加入一段代码
--args --disable-web-security --user-data-dir 记住在后面空一格粘贴即可如下图所示：

1.png

然后注意你的打开chrome的方式，找到刚刚更改完成的chrome快捷图标右键打开，在打开之前要关闭之前打开的页面（记住哦，只有这样打开才有效果）
进入chrome页面，如果你的页面有如下提示，说明你设置成功，此方法针对的是chrome49版本以上

2.png

在开发模式中采用什么方式呢？

上面介绍的一个方法只是用在开发环境中，如果将项目发布到生产环境中该怎么办，难道还是要用会jsonp吗，当然作为一名开发者来说找到另外一个解决方法是很cool的，jsonp的优点就是浏览器兼容性好可以向下兼容到ie6,7,8 但是随着时间的推移，我们在对浏览器兼容这块考虑的越来越少了，比如前段很火的一个框架vue就直接抛弃了ie6,7,8，所以当我们无需在考虑浏览器兼容性这块的时候，我推荐大家采用cors：跨域资源共享。

一、cors：跨域资源共享

定义：它允许浏览器向跨源服务器，发出ajax请求
兼容性：浏览器都支持cors，在ie10以下不支持
如何使用：实现CORS通信的关键是服务器，只有服务器解除跨域限制。

//后端代码的核心
        response.addHeader("Access-Control-Allow-Origin", "你允许的源ip");//允许访问的源，此时这里不能设置为*
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");//允许访问的方式
        response.addHeader("Access-Control-Allow-Headers", "Content-Type");
        response.addHeader("Access-Control-Max-Age", "1800")
response.setHeader("Access-Control-Allow-Credentials", true);
//前端代码
//和正常的ajax请求一样，只不过需要加一个属性，比如我使用了axios我是这样就行配置的，同理如果用jquery或者其他ajax请求只需要加上withCredentials:true这个配置就好，这个属性的意思是是否需要进行用户认证，标准的跨域请求是不会发送cookie等用户认证凭据的，使用cros后如果不带着用户凭证，服务器对每次请求的请求都默认为是不同的连接，所以为了让服务器识别每次的请求是否是同一个连接，所以每次请求客户端都需要带着用户的凭证cookie然后服务器根据cookie来判断。
import $https  from 'axios';
require('es6-promise').polyfill();
let $http = $https.create({timeout: 12000,withCredentials:true});//此设置和服务端response.setHeader("Access-Control-Allow-Credentials", true);一一对应

ok，上面就是一种方式，优点是允许所有的请求方式，未来的趋势，缺点就是浏览器兼容性稍差，安全这块需要多多考虑。

二、使用iginx服务器进行反向代理的形式解决了跨域访问的限制

具体如何进行配置，大家就先自己实践，这里只提供一个方法