同源策略与CORS跨域

同源策略与CORS跨域

PS:这篇文章是紧接着JSONP原理和Ajax学习与理解写的,有些内容是承接了上两篇文章.
这篇文章只算是个人我的学习笔记,内容没有通过精心排版,也没有认真校对格式,一些错误请见谅.

用 form , a,img,link,script.均可以跨域发送请求
可是!
同源策略:只有 协议+端口+域名 如出一辙才容许发 AJAX 请求.
例如咱们向baidu.com发送Ajax一个请求

请求成功了,可是报了一个错

加载失败了,
因此,请求发送出去了,可是拿不到响应!

同源策略

只有 协议+端口+域名 如出一辙才容许发 AJAX 请求

如出一辙如出一辙如出一辙如出一辙如出一辙如出一辙如出一辙如出一辙

http://baidu.com 能够向 http://www.baidu.com 发 AJAX 请求吗 no
http://baidu.com:80 能够向 http://baidu.com:81 发 AJAX 请求吗 no
浏览器必须保证
只有 协议+端口+域名 如出一辙才容许发 AJAX 请求

为何要有同源策略?

为何form表单提交没有跨域问题，但ajax提交有跨域问题？ - 方应杭的回答 - 知乎

由于原页面用 form 提交到另外一个域名以后，原页面的脚本没法获取新页面中的内容。因此浏览器认为这是安全的。而 AJAX 是能够读取响应内容的，所以浏览器不能容许你这样作。若是你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。因此浏览器这个策略的本质是，一个域名的 JS ，在未经容许的状况下，不得读取另外一个域名的内容。但浏览器并不阻止你向另外一个域名发送请求。

简单地说就是使用form发送请求,就会刷新页面,因此原页面没有了,就认为是安全的.可是Ajax能够吧响应内容读取了.而且显示在本页面上.出现安全性问题

若是没有同源策略,那么任何网站均可以读取别人的支付宝余额等等

CORS 跨域

除了用jsonp以外,能够用CORS

下面咱们用两个网站来模拟Ajax跨域而且解决跨域问题

先写前端的Ajax请求代码

let myButton = document.getElementById('myButton');
myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("请求和响应都完毕了");
            if ( request.status>=200&&request.status<=400){
                console.log('说明请求成功');
                let string = request.responseText;
                //把符合json语法的字符串转化为js对应的值
                let object2 = window.JSON.parse(string);
                console.log(object2)
            }else if(request.status>=400){
                console.log("响应失败");
            }
        } 
    }
    request.open('GET','http://jack.com:8002/xxx')//配置request.请求的路径为第二个网站的8002端口
    request.send();//发送请求
})

服务器端的代码

else if (path === '/xxx') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
      }
    }
    `)
    response.end()
  }

监听两个端口,而后用mataotao.com:8001的网站向jack.com:8002网站发起请求,这就算是跨域发送请求

点击点我后:

ajax请求由于跨域问题没有发送成功!

解决方法

一句代码:设置请求头:

//HTTP访问控制（CORS）容许来自http://mataotao.com:8001的请求,并给予相应
    response.setHeader('Access-Control-Allow-Origin','http://mataotao.com:8001')

else if (path === '/xxx') {
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')

    //HTTP访问控制（CORS）容许来自http://mataotao.com:8001的请求,并给予相应
    response.setHeader('Access-Control-Allow-Origin','http://mataotao.com:8001')
    
    
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
      }
    }
    `)
    response.end()
  }

而后重启jack.com:8002的服务器,再从新请求一次

成功
CORS 能够告诉浏览器，我俩一家的，别阻止他

CORS的意思

突破同源策略 === 跨域

Cross-Origin Resource Sharing
跨域(源,站)资源共享

总结

CORS相对于JSONP,CORS能够发任意请求,而JSONP只能发送get请求

response.setHeader('Access-Control-Allow-Origin','http://mataotao.com:8001')
这句话是跨域(突破同源策略)的核心,即容许别的网站(例如http://mataotao.com:8001)跨域向我发请求,而且容许响应

Ajax总结

什么是Ajax?

1. 使用XMLHttpRequest发送请求
2. 服务器返回json格式的字符串
3. js解析json,并更新局部页面

面试手写Ajax

就是这9行代码必定要会!!!