前端跨域 JSONP cors

同源策略

只有 协议+端口+域名一模一样才允许发ajax请求
http://baidu.com 不可以向 http://www.baidu.com 发ajax请求

浏览器必须保证
只有 协议+端口+域名 一模一样才允许发ajax请求

跨域发送请求是成功的，不过不会得到结果

JSONP

1. A.com网站 想访问 B服务器，获取B网站返回的数据
2. 在A网站上新建一个script标签，src 写成类似 B.com/get/data?callback=dispatchDate，向B网站发起get请求
   B网站接受到请求，拿到数据data: {name: leon, sex: male, age: 18}后，返回给A网站dispatchDate( {name: leon, sex: male, age: 18});
3. A网站得到B返回的数据，就会自动调用A网站中写好的dispatchDate方法，处理返回的data
4. 删除A网站中生成的script标签

参考答案

JSONP
请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）

请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName，构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应
浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
这就是 JSONP

约定：

callbackName -> callback
yyy -> 随机数 frank12312312312321325()
jQuery 用法

 $.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

JSONP 为什么不支持 POST

因为 JSONP 是通过动态创建 script 实现的,而创建 script 只能发送 get 请求
参考答案
因为 JSONP 是通过动态创建 script 实现的
创建 script 只能发送 get 请求

加入一个网站有登录校验
首先访问登录页，输入用户名密码后在浏览器种cookie，然后用户可以进行接下来的操作，不会跳的登录页。
如果用户强制输入login后的url则会重定向到登录页。cookie没有设置成功。会被后端拦截。

login => set cookie
ajax request => get cookie 后端会根据cookie判断是否是合法用户

注意cookie只能种在自己的域下
跨域不带cookie

CORS跨域

后端程序员添加相应头

response.setHeader('Access-Control-Allow-Origin', 'http://www.zhengshengliang.com:8887'); // 阿亮是我兄弟
response.setHeader('Access-Control-Allow-Origin', '*'); // 四海之内皆兄弟

JSONP有个缺点，不能发POST请求
Cross-Origin Request Sharing: 跨站资源共享

postMessage iframe

cors相关:
阮一峰 cors