盛世天下
406.16M · 2025-09-18
随着前后端分离技术的越来越盛行，跨域问题也逐渐凸显了出来。跨域问题的根本原因：因为浏览器收到同源策略的限制，当前域名的js只能读取同域下的窗口属性。什么叫做同源策略？就是不同的域名, 不同端口, 不同的协议不允许共享资源的，保障浏览器安全。同源策略是针对浏览器设置的门槛。如果绕过浏览就能实现跨域，所以说早期的跨域都是打着安全路数的擦边球，都可以认为是 hack 处理。这一段是我从别的地方cp过来的，大家将就着看吧。
这里要注意的是，只有访问类型为xhr（XMLHttpRequest)的才会出现跨域。
以Google Chrome为例，浏览器以
"C:ProgramFiles(x86)GoogleChromeApplicationchrome.exe"
--disable-web-security--user-data-dir
中模式打开，右键点击浏览器快捷方式，在目标中输入上述代码即可解决（不推荐）。
JQuery中的正常AJAX请求代码片段
$("#demo1").click(function(){
$.ajax({
url : 'http://www.**tpad*min.top/Index/Test/crossDomain',
data : {},
type : 'get',
success : function (res) {
//No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.**0.*0.1' is therefore not allowed access. 在执行时候报出的错误，这代表了跨域错误
alert(res);
}
});
});
JQuery中的使用JSONP的AJAX请求代码：
$("#demo2").click(function(){
$.ajax({
url : 'http://www.**tpad*min.top/Index/Test/crossDomain',
data : {},
type : 'get',
dataType : 'jsonp',
success : function (res) {
alert(res);
}
});
});
这时候我们看到 请求的网址自动变成了
http://www.**tpad*min.top/Index/Test/crossDomain?callback=jQuery331015214102388989237_1534993962395&_=1534993962396
这是为什么呢？原来由于跨域访问的只限制xhr类型的请求（上文中已经说了），所以js中就利用了这一特点，让服务端不在返回的是一个JSON格式的数据，而是返回一段JS代码，将JSON的数据以参数的形式传递到这个函数中，而函数的名称就是callback参数的值，所以我们还需要修改服务端的代码，代码如下：
<?php
$callback = isset($_GET['callback'])?$_GET['callback']:'';
if (!empty($callback)) {
$arr = ['code' => 200, 'name' => 'cui'];
$data = json_encode($arr);
exit($callback . '(' . $data . ')');
}
?>
OK，现在问题解决了，但是JSONP存在着诸多限制，下面将列出两个个我知道的：
JSONP只支持GET请求，什么？你要提交表单，sorry，此路不通它只支持跨域HTTP请求
虽然只有两个，但是让很多人不得不放弃它，所以出现了下面的解决办法。
回归问题本质，跨域问题为什么会产生，上面已经说了，是由于浏览器的限制，那么在执行过程中有什么不同，下面两张度分析一下（主要看请求头的部分）：
这是非跨域请求
这是跨域请求
这时我们发现跨域访问的请求头中存在Origin的字段，用来记录当前的访问域名，我们可以再服务端增加一个响应头Access-Control-Allow-Origin来告诉浏览器我们支持它获取就可以了，代码实现：
<?php
header('Access-Control-Allow-Origin:http://127.**0.*0.1');
$arr = ['code' => 200, 'name' => 'cui'];
echo $data = json_encode($arr);
?>那如果我有多个域名进行跨域访问呢
<?php
$requestHeader = getallheaders();
$origin = isset($requestHeader['Origin'])?$requestHeader['Origin']:'';
switch ($origin) {
case 'http://127.**0.*0.1':
header('Access-Control-Allow-Origin:http://127.**0.*0.1');
break;
case 'http://lo*calhos*t*':
header('Access-Control-Allow-Origin:http://*lo*calhos*t');
break;
default:
break;
}
$arr = ['code' => 200, 'name' => 'cui'];
echo $data = json_encode($arr);
//注意，不支持下面这种写法
//header('Access-Control-Allow-Origin:http://localhost,http://127.**0.*0.1');
?>或者直接写成（很不安全，不推荐这么写）
<?php
header('Access-Control-Allow-Origin:*');
$arr = ['code' => 200, 'name' => 'cui'];
echo $data = json_encode($arr);
?>到这里，其实已经结束了，但还有一些其他的特殊情况
为了应对种种限制，我们再来看一段代码
$("#demo1").click(function(){
$.ajax({
url : 'http://cui.tp*a*d*min.top/crossDomain.php',
data : {},
type : 'PUT',
contentType : 'application/json',
header: {
token:'asdfgqwerttyyazxcvbvb'
},
success : function (res) {
alert(res);
}
});
});
虽然我们在服务端加入了Access-Control-Allow-Origin响应头，但是如果出现上面所说的情况时，我们需要做一些特殊的设置，修改服务端代码为：
<?php
//这里增加了两行代码
header('Access-Control-Allow-Headers:Content-Type');
header('Access-Control-Allow-Methods:PUT');
$requestHeader = getallheaders();
$origin = isset($requestHeader['Origin'])?$requestHeader['Origin']:'';
switch ($origin) {
case 'http://127.**0.*0.1':
header('Access-Control-Allow-Origin:http://127.**0.*0.1');
break;
case 'http://lo*calhos*t*':
header('Access-Control-Allow-Origin:http://*lo*calhos*t');
break;
default:
break;
}
$arr = ['code' => 200, 'name' => 'cui'];
echo $data = json_encode($arr);
?>
这里虽然成功了，但是我们发现每次请求的时候会出现两条请求记录（这个可不是我请求了两次，看下面截图）
这里我们需要进行一下区分（简单请求模式与非简单请求模式）
符合
