同源策略与跨域

一、浏览器发请求的几种方式：

1、form表单，优点是可以发送多种形式的请求，缺点是会刷新或重开页面；
2、a，只能发送get请求，且会刷新或重开页面；
3、img,只能发送get请求，且只能以图片的形式返回；
4、link，只能发送get请求，且只能以css或者favicon的形式返回；
5、script，主要表现形式是JSONP，只能发送get请求，且会以脚本的形式运行

二、AJAX：

1、使用XMLHttpRequest发请求
2、服务器返回XML(现在更多的是用JSON)格式的字符串
3、JS解析XML(JSON),并更新局部页面

举个栗子：

//前端代码
let request = new XMLHttpRequest()
request.open('get','http://www.baibu.com/xxx')
request.send()
request.onreadystatechange = ()=>{
    if(request.readyState === 4){
        if(request.status === 200){
            let string = request.responseText
            let obj = window.JSON.parse(string)
            console.log(obj)
        }
    }
}

三、同源策略：

• 最初，浏览器出于安全考虑，默认A网页设置的Cookie,B网页不能打开，除非这两个网页同源。

• 同源是指：协议+域名+端口 都要相同

• 目前受到同源策略限制的行为有：
  1、无法读取非同源网页的Cookie、LocalStorage、IndexedDB
  2、无法接触非同源网页的DOM
  3、无法向非同源网页发送AJAX请求（可以发送，但浏览器不会返回信息）

• 规避同源策略的方法：
  1、JSONP
  2、WebSocket
  3、CORS

四、JSONP：

请求方：浏览器
响应方：服务器
1、JSONP是JSON+Panding的缩写，是服务器与客户端跨源通信的常用方法，只能发送get请求，不受同源策略限制
2、请求方动态创建script，src指向响应方，同时传一个查询参数，格式为?callback = yyy，用来指定回调函数的名字
3、响应方收到请求后，会将数据放在回调函数的参数位置返回给请求方

• 为什么JSONP不能用POST方法？
  1、因为JSONP就是动态生成一个script来实现的
  2、动态创建script只能用GET，不能用POST

五、WebSocket:

WebSocket是一种以ws://和wss://为前缀网络通信协议，请求头格式如下(摘自维基百科)：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

该协议不实行同源策略，具体教程可参考阮一峰的WebSocket教程

六、CORS：

• CORS的全称是跨源资源共享（Cross-Origin Resource Sharing），它允许浏览器向跨域的服务器发出XMLHttpRequest请求，简单地说在响应头设置一个setHeader,内容是Access-Control-Allow-Origin和允许发来请求的URL：

//后端代码
...}else if(path === '/xxx'){
    response.stateCode = 200
    response.setHeader('Content-Type','text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://www.baidu.com:8001')
    //这是最主要的,允许接受由http://www.baidu.com:8001发出的请求，如果设置为`*`，就是接受所有跨域请求。
    response.write(`{
        "success":{
            "content":"Congraduation"
        }
    }`)
    response.end()
}

• JSONP与CORS的比较：
  CORS可以支持所有类型的HTTP请求，JSONP只能支持GET请求
  JSONP支持老式浏览器，CORS不一定适用。