跨域请求
同源策略
同源策略是浏览器给的一个行为
当你再发送请求的时候, 会涉及到两个地址
1. 打开当前页面的地址
2. 你要请求的地址
两个地址中的 端口号 域名 传输协议
只要由任意一个不一样, 就是非同源请求
会触发浏览器的同源策略
不允许你获取这个服务器上的数据
触发了同源策略的请求我们叫做 跨域请求
私人: 请求别人家的服务器(实战情况)
第一:
页面(html, js, css, 静态资源) 是在一个服务器上
所有的数据, 数据库, 在一个服务上
第二:
我自己不具备条件, 购买别人家服务器服务
美团: 地图功能
新闻: 买新浪的接口, 腾讯的接口
解决浏览器不允许请求别人家服务器的情况
基于 http 协议
打开页面 localhost/index.html
页面里面发送一个请求 ajax({ url: './a.php' })
请求地址: localhost/a.php
完整地址
打开页面 http://localhost:80/index.html
请求地址 http://localhost:80/a.php
1. jsonp
jsonp 跨域
浏览器的同源策略, 不允许发送跨域的 ajax 请求
使用 jsonp 手法来实现跨域请求
script 标签
script 标签可以执行 js 代码
script 标签有一个属性叫做 type="text/javascript"
会把里面的代码当作 js 来解析
不写 type 属性的时候, 默认是 text/javascript
src 属性
src 是引入外部资源的属性
不受同源策略的影响
当上面两个加再一起
只要你引入任何一个内容, 都会被当作 js 代码来解析
jsonp 的核心
利用 script 标签的 src 属性
去向一个非同源的服务器请求数据
只要这个服务器能给我返回一个字符串
我就会把这个字符串当作 js 代码来执行
jsonp 请求数据
要求服务器返回一个 函数名() 这样的字符串
提前准备号一个函数
前端告诉后端你准备好的函数名是什么
再次发送请求的时候, 以参数的形式告诉后端
准备好的函数名是什么
jsonp 常见的面试题
1. jsonp 原理
src 不受同源策略影响
script 标签会把请求的内容当作 js 代码来执行
2. jsonp 的返回值
字符串, 函数名() 形式的字符串
一段可以执行的 js 代码字符串
3. jsonp 的优缺点
优点
绕开了同源策略, 实现跨域请求
方便, 因为是以 script 标签外部资源的形式请求
缺点
不好做安全防范
2.cors - 跨域资源共享
CORS 是一个 W3C 标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了 AJAX 只能同源使用的限制。
跨域请求, 不是请求发不出来
实际上: 请求已经发送了, 而且到了服务器了, 响应页回到浏览器了
但是浏览器判断了是非同源位置, 不允许你使用服务器给回的数据
由服务器告诉浏览器一个事情, 这个域名我允许请求我的内容
header("Access-Control-Allow-Origin:*");
header("Access-Control-Request-Methods:GET, POST");
header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');
php 部分:
注意:普通跨域请求:只服务端设置 Access-Control-Allow-Origin 即可,前端无须设置,若要带 cookie 请求:前后端都需要设置。由于同源策略的限制,所读取的 cookie 为跨域请求接口所在域的 cookie,而非当前页。
简单请求:
浏览器直接发出 CORS 请求。就是在头部信息之中,增加一个Origin
字段。
非简单请求:
是那种对服务器有特殊要求的请求,比如请求方法是PUT
或DELETE
,或者Content-Type
字段的类型是application/json
。
非简单请求的 CORS 请求,会在正式通信之前,增加一次 HTTP 查询请求,称为"预检"请求(preflight)。
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些 HTTP 动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest
请求,否则就报错。
版权声明: 本文为 InfoQ 作者【Jason199】的原创文章。
原文链接:【http://xie.infoq.cn/article/81f7608fcb4701033e40eff19】。
本文遵守【CC BY-NC】协议,转载请保留原文出处及本版权声明。
评论