AJAX解决跨域(ppt来自他处)仅供本人复习用

请求限制

AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用

解决方法:1JSONP (json in padding)

AJAX解决跨域(ppt来自他处)仅供本人复习用

AJAX解决跨域(ppt来自他处)仅供本人复习用
最简单的调用,3000向3001发送请求
AJAX解决跨域(ppt来自他处)仅供本人复习用
服务器响应
AJAX解决跨域(ppt来自他处)仅供本人复习用

下面一句res.jsonp({a:1,b:2})就是在做上面所有标注的事。

优化 动态发送请求

AJAX解决跨域(ppt来自他处)仅供本人复习用
自动生成script标签,并且设置src的值,然后动态添加入页面中,结束后onload,将script删除。

封装JSONP

如果每次发送请求都要写很长代码,显然不现实,将jsonp封装起来,每次需要只需要传值就行。
AJAX解决跨域(ppt来自他处)仅供本人复习用
使用随机数生成随机小数去掉小数点后自动生成函数名。用window[函数名]=用户传进来的函数将其变成全局函数。
函数名=function(){},当返回这个函数的调用时,就立即调用,对返回的数据进行处理。
AJAX解决跨域(ppt来自他处)仅供本人复习用
如图,若要跨域,只需要调用封装好的jsonp函数,输入地址,请求参数并且加上函数定义。就可以了

服务器端的优化就是直接使用res.jsonp(数据)返回就行。

缺点就是只能发送get请求。

第二种解决跨域 CORS跨域资源共享

AJAX解决跨域(ppt来自他处)仅供本人复习用
1 首先在跨域的服务器端设置
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用

拦截所有请求后设置响应头,允许谁访问我,允许哪种方式,是否携带cookie
接下来在浏览器正常发送请求就行
AJAX解决跨域(ppt来自他处)仅供本人复习用
因为3001的服务器已经允许了3000的浏览器对其进行访问,所有请求成功。

3 通过服务器跨域

AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用
在自己的服务器使用request请求对3001的服务器发送请求。body为响应的内容,相应成功err为零。AJAX解决跨域(ppt来自他处)仅供本人复习用

cookie

AJAX解决跨域(ppt来自他处)仅供本人复习用
cookie是与服务器交互时候必备的,第一次向服务器请求后,返回浏览器cookie,在接下去的每个请求中都携带cookie判断。
比如登录,如果服务器响应了cookie后,下次请求若是携带了cookie就表示是登录状态,若不携带,表示未登录,强制性跳转到登录界面去。
当跨域时
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用
AJAX解决跨域(ppt来自他处)仅供本人复习用