跨域请求的产生
跨域请求归根结底是由于浏览器的“同源策略”引起的，同源策略指的是域名相同、协议相同、端口相同， 假设有http://www.a.com/test.html，下面的示例 域名不同
http://demo.a.com/test1.html
协议不同
https://www.a.com/test2.html
端口号不同
http://www.a.com:8090/test3.html
实验文件列表
先介绍一下文件列表：
a_ajax.html是在域名a.ajax.com下使用b_ajax.html是在域名b.ajax.com下使用ajax.html是在域名www.ajax.com下使用ajax2.html是在域名www.ajax2.com下使用result.php是公共使用返回文件
跨子域解决方案
如http://a.ajax.com/a_ajax.html请求http://b.ajax.com/result.php，通过iframe来加载http://b.ajax.com/b_ajax.html，同时来提升域的级别，a_ajax.html示例代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>a_ajax</title> ???<script type="text/javascript"> ???????document.domain = "ajax.com"; ???</script></head><body><h1>a.ajax.com</h1><iframe src="http://b.ajax.com/b_ajax.html"></iframe></body></html>
b.ajax.html示例代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>b_ajax</title> ???<script src="jquery.min.js"></script> ???<script type="text/javascript"> ???????document.domain = ‘ajax.com‘; ???????function test() { ???????????$.ajax({ ???????????????type: ‘GET‘, ???????????????url: ‘http://b.ajax.com/result.php‘, ???????????????data: { ???????????????????username: ‘qiaoweizhen‘ ???????????????}, ???????????????dataType: ‘json‘, ???????????????success: function (response) { ???????????????????console.log(response); ???????????????} ???????????}); ???????} ???</script></head><body><h1>b.ajax.com</h1><a href="javascript:test();">Submit</a></body></html>上述例子通过document.domain = ‘ajax.com‘来将a.ajax.com和b.ajax.com提升到同一个根域ajax.com下面来实现跨域。
jsonp解决方案
如http://www.ajax.com/ajax.html请求http://www.ajax2.com/result.php，示例代码 ajax.html
function test() { ???$.ajax({ ???????type: ‘GET‘, ???????url: ‘http://www.ajax2.com/result.php‘, ???????data: { ???????????username: ‘qiaoweizhen‘ ???????}, ???????dataType: ‘json‘, ???????success: function (response) { ???????????console.log(response); ???????} ???});}result.php文件示例代码：
<?php$fp = fopen(‘log.txt‘, ‘w+‘);fwrite($fp, print_r($_REQUEST, true));fclose($fp);
如果使用上述代码去请求的话，先查看url，只有一个我们自己使用的参数username：
然后查看报错信息：
然后观察服务器端没有产生任何日志文件，则说明在浏览器端就被禁用掉了。如果将请求改成jsonp代码如下：
function test() { ???$.ajax({ ???????type: ‘GET‘, ???????url: ‘http://www.ajax2.com/result.php‘, ???????data: { ???????????username: ‘qiaoweizhen‘ ???????}, ???????dataType: ‘jsonp‘, ???????success: function (response) { ???????????console.log(response); ???????} ???});}发起请求的话，就会发现url有所变化，使用jquery会默认增加callback和_参数：
查看控制台输出：
而查看服务端日志，如下：
说明两者之间的通信是没有问题，就需要将处理的结果返回给客户端，可以修改result.php代码，示例如下：
<?php$fp = fopen(‘log.txt‘, ‘w+‘);fwrite($fp, print_r($_REQUEST, true));fclose($fp);$callback = $_REQUEST[‘callback‘];$username = $_REQUEST[‘username‘];$response = [ ???‘status‘ ?=> 1, ???‘message‘ => ‘ok‘, ???‘data‘ ???=> [ ???????‘username‘ => $username ???]];echo $callback . ‘(‘ . json_encode($response) . ‘)‘;
ok，上面的实例就完成了通过jsonp进行跨域请求的操作，有以下几点需要说明：
jsonp只支持GET请求，这是因为jsonp请求，归根结底是通过动态从服务端加载一段JavaScript脚本来在客户端执行，返回实例：jQuery183014317321930723415_1483925970177({"status":1,"message":"ok","data":{"username":"qiaoweizhen"}})jsonp中的callback是可以自定义的，只需要和dataType同级别参数jsonpCallback，如jsonpCallback: ‘myCallback‘，在定义一个myCallback函数就可以了- 可不可以在
data中传入callback参数，是可以的，但是容易混淆，而且服务端接收参数的时候只能接收到一个callback参数，不建议这么做
CORS(跨域资源共享)解决方案
上面通过jsonp来实现了简单的跨域请求，但是会面临以下几个问题：
- 请求来源是否合法
- 请求数据大小有限制，因为是
GET请求 jsonp不提供错误处理机制，即动态加载的返回代码是有问题的话，没有相应的处理机制 解决上面最好的方式是通过CORS，经常使用服务端两个参数Access-Control-Allow-Origin(配置域名)，Access-Control-Request-Method(配置方法)。如http://www.ajax.com/ajax.html请求http://www.ajax2.com/result.php，ajax.html示例代码如下：
function test() { ???$.ajax({ ???????type: ‘GET‘, ???????url: ‘http://www.ajax2.com/result.php‘, ???????data: { ???????????username: ‘qiaoweizhen‘ ???????}, ???????dataType: ‘json‘, ???????success: function (response) { ???????????console.log(response); ???????} ???});}服务端通过设置返回头信息，来进行一定的限制，服务端result.php示例代码如下：
<?phpheader(‘Access-Control-Allow-Origin:*‘);
这样子就允许所有域名进行ajax跨域请求，如果需要限制，示例代码如下：
<?php$allowOrigins = [ ???‘http://www.ajax.com‘, ???‘http://a.ajax.com‘];if (in_array($_SERVER[‘HTTP_ORIGIN‘], $allowOrigins)) { ???header(‘Access-Control-Allow-Origin:‘ . $_SERVER[‘HTTP_ORIGIN‘]); ???echo json_encode([ ???????‘status‘ ?=> 1, ???????‘message‘ => ‘ok‘ ???]);}上面的是通过简单请求，如果非简单请求，服务器会先通过预检机制来进行限制，ajax.html示例代码：
function test() { ???$.ajax({ ???????type: ‘PUT‘, ???????url: ‘http://www.ajax2.com/result.php‘, ???????data: { ???????????username: ‘qiaoweizhen‘ ???????}, ???????dataType: ‘json‘, ???????success: function (response) { ???????????console.log(response); ???????} ???});}如果发送了一个PUT请求，查看请求url，发现是Request Method:OPTIONS而不是Request Method:PUT，这是因为浏览器和服务器之间进行了一次预检通信机制：
如果服务端设置了，可以使用PUT请求，服务端result.php代码如下：
$allowOrigins = [ ???‘http://www.ajax.com‘, ???‘http://a.ajax.com‘];header(‘Access-Control-Allow-Origin:*‘);header(‘Access-Control-Allow-Methods:PUT‘);
那么就会发生两次请求，一次是预检机制的OPTIONS请求，一次是真正的PUT请求
Ajax跨域原理及解决方案
原文地址：https://www.cnblogs.com/lonmyblog/p/8394729.html