Chrome的跨域问题初探
Posted 拂晓杂谈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Chrome的跨域问题初探相关的知识，希望对你有一定的参考价值。
一、 什么是跨域问题？
跨域问题是前端开发中绕不过去的一个问题。所谓跨域问题，就是前台调用后台的接口时候，后台的接口与前台不属于同一个域。那么怎么才算属于同一个域呢？必须做到前台和后台的接口中，协议，域名，端口三者都要一样，才属于同一个域。否则就会产生跨域问题。
二、发生跨域问题的原因：
发生跨域问题首先你要明白，不是服务器不给你提供请求，而是因为有个多管闲事的chrome浏览器，它发现你的请求是跨域的，它就报错。
另外，发生跨域问题的根本原因是因为发送的请求是XMLHttpRequest请求，俗称xhr请求。只有这种请求，在跨域的时候，chrome才会报错。如果你发送的是JS请求，chrome就不会报错。（很多解决办法是把发送的xhr请求改装称为js请求来通过chrome的跨域验证，如发送jsonp请求，这里不展开讲）。
三、跨域问题的报错方式形式
报错形式如下：
一般会告诉你说没有Access-Control-Allow-Origin 头。
为什么呢？因为chrome在发送request请求的时候，会检查你是否跨域，如果跨域，就在你的请求头里插入一个Origin头：
当从服务器返回reponse的时候，就会检查你的响应头里有没有Access-Control-Allow-Origin头，如果没有，就报错。
四、解决方法：
主要有三个方向的解决方法：
第一、禁用chrome的跨域检查（这也是最方便的方法，但是治标不治本，可以用于开发过程中的调试），这也是我采用的方法，待会会重点讲一下。
第二、将xhr请求包装称为其他请求，如用jsonp发送js请求。这样会被允许跨域。
第三、也是解决这个问题的根本方法，就是通过修改服务器端的代码增加filter，来手动给reponse里加入“Access-Control-Allow-Origin”头和“Access-Control-Allow-Methods”。或者在应用服务器tomcat中给response加头，或者在http服务器，如apache，nginx中给response中加头。总而言之，核心思想就是给response对象中加入响应头。
五、Mac下禁用chrome的跨域检查
输入以下指令，就可以启动一个禁用跨域的chrome浏览器：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/dawnchau/Documents/ChromeDisable
其中你自己要建立一个文件夹，用来放新开的Chrome浏览器的数据，路径放在--user-data-dir=的后面。
当然也可以写成一个脚本，以后可以直接运行：
以上是关于Chrome的跨域问题初探的主要内容，如果未能解决你的问题，请参考以下文章