同源策略与CORS跨域

ninefive 发布于2019-08-23 10:34 / 1938人阅读

摘要：所以浏览器认为这是安全的。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。所以浏览器这个策略的本质是，一个域名的，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。

同源策略与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?

使用XMLHttpRequest发送请求

服务器返回json格式的字符串

js解析json,并更新局部页面

面试手写Ajax

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

私有云 idc机房托管同源策略 linux安全策略与实例 linux安全策略与实例下载 linux安全策略与实例pdf

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96473.html

同源策略与跨域资源共享

摘要：由于浏览器的同源策略导致无法直接通过拿到后台数据。目前，如果非同源，共有三种行为受到限制。此处应有掌声参考关于跨域资源共享和浏览器的同源策略限制的具体讲解。工作中，经常会遇到需要跨域请求数据的情况。由于浏览器的同源策略,导致无法直接通过ajax拿到后台数据。解决这个问题的方式之一就是JSONP。还有一种方式更高效简单——跨域资源共享(Cross-origin Resource Sha...

darcrand 2019-08-22 18:08 评论0 收藏0
同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

alighters 2019-08-21 11:17 评论0 收藏0
同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

赵连江 2019-06-27 15:05 评论0 收藏0
JavaScript 的同源策略及其"CORS"跨域方案

摘要：设置的值，为其当前域或其当前域的父域。场景文档中的一个脚本执行以下语句即可通过同源检测跨源网络访问同源策略控制了不同源之间的交互。服务器确认允许之后，才发起实际的请求。文章大纲同源策略同源是什么？如何跨源，以及场景应用源的更改跨源网络访问跨源脚本API访问跨源数据存储访问了解CORS CORS是什么？ CORS功能概述 CORS关于Cookie ...

maochunguang 2019-08-23 15:42 评论0 收藏0