同源策略与CORS跨域

同源策略与CORS跨域

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

用 form , a,img,link,script.都可以跨域发送请求
但是!
同源策略:只有 协议+端口+域名 一模一样才允许发 AJAX 请求.
例如我们向baidu.com发送Ajax一个请求
PdzFgg.png

PdzVDs.png
请求成功了,但是报了一个错
PdzmEq.png
加载失败了,
所以,请求发送出去了,但是拿不到响应!

同源策略

只有 协议+端口+域名 一模一样才允许发 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网站发起请求,这就算是跨域发送请求
Pw9l28.png

Pw9Q8f.png

点击点我后:
Pw98Kg.png
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的服务器,再重新请求一次

Pw9rMF.png
成功
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

PwPu1f.png
就是这9行代码
一定要会!!!


马涛涛的博客——前端的征途
马涛涛的个人博客——总结前端知识,学习前端技术
1.5k 声望
142 粉丝
0 条评论
推荐阅读
用一个例子理解JS函数的底层处理机制
个人笔记,如有错误烦请指正我的博客即将同步至 OSCHINA 社区,这是我的 OSCHINA ID:mttwind,邀请大家一同入驻:[链接]以下面代码的运行举例,一行行进行运行的解析 {代码...} var x = [12, 23];运行如下开辟堆...

风彻阅读 791

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.9k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.4k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.3k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2.1k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.9k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20.1k评论 9

1.5k 声望
142 粉丝
宣传栏