一.什么跨域请求?
简单的讲就是从A域向B域发请求,如下图所示:
假设localhost为A域, www.blog.com为B域
在localhost下的页面可以向localhost的页面发送请求
在localhost下的页面不可以向www.blog.com域名下的页面发送请求
二.为什么要解决跨域请求?
在实际项目开发中，经常会碰到跨域请求问题，所以必须要解决。
① 模拟场景一：公司同时可能具有多个系统（OA系统、ERP系统、官方网站）
OA系统：http://www.oa.com/ 开发了一个php的接口（api.php）
官方网站：http://www.home.cn/ 使用Ajax向OA系统的api.php接口发送请求
由于受到同源策略的影响，Ajax不允许从itcast.cn域名向oa.com域名发送请求。
② 模拟场景二：手机app软件、官方的网站提供数据接口api.php
手机：wifi/2G/3G/4G网络，生成的url地址也都不是固定的,
官网：http://www.home.cn/api.php发送Ajax请求
由于受到同源策略的影响，Ajax不允许http://192.168.2.8/域名向http://www.home.cn/api.php域名发送请求。
三. 跨域请求演示
实例代码如下:
web.test.com域名下的base.html文件发送普通的AjaxGET请求:
local.jsonp.com域名下的test.php文件:
浏览器报错信息如下:
四.如何解决跨域请
第一种方法:
① 在localhost域名下编写demo1.html
② 在www.jsonp.com域名下编写test1.php
通过GET方式接收参数,返回字符串
③交互过程
通过浏览器请求demo1.html, 会发送两个Http GET请求,其中一个通过<script>的src属性请求local.jsonp.com下的test1.php, 如下图所示:
使用jquery的dataType;
设置jQuery的dataType属性为jsonp;jsonp属性为fn
此处注意两点:
1.json和jsonp是完全不同的两个概念
jsonp是一种非官方的协议, 使用<script>标签的特性解决跨域请求问题
2.使用jsonp方式时, 只能使用Ajax的GET请求
效果如下:
第三种方法:
cors是一个w3c标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了ajax只能同源使用的限制。
cors需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个cors通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，cors通信与同源的ajax通信没有差别，代码完全一样。浏览器一旦发现ajax请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
没有实现cors接口的情况如下:
报错信息:
cors解决跨域办法:
与JSONP的比较:
1.CORS与JSONP的使用目的相同，但是比JSONP更强大;
2.JSONP只支持GET请求，CORS支持所有类型的HTTP请求。
3.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。