同源策略与跨域问题解决

同源策略(Same-Origin Policy)

引用*上的一句话:

同源策略是指在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI、主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来源。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

同源策略与跨域问题解决

 同源策略保证了用户信息的安全,因为Web应用程序广泛依赖于HTTP cookie
来维持用户会话,所以必须将不相关网站严格分隔,以防止丢失数据泄露。

设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

违背同源策略就是跨域。

如何解决跨域问题

1、JSONP

(1)概念

       JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持 get 请求。

(2)工作原理       在web网页上有些HTML标签天生具有跨域能力,比如: img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。 (3)使用       前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        //声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提示文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

     后端代码:

const express = require('express');
const app = express();

//用户名检测是否存在
app.get('/check-username',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

      这个案例的流程是,你在框中输入任意值,鼠标触发失去焦点事件后,通过发送ajax请求至服务端,经过对应路由的处理逻辑,返回客户端的是一个函数调用结果(handle函数),最后浏览器解析并执行该函数,获取其中data数据。

演示效果图:

同源策略与跨域问题解决

2、CORS

(1)概念

        CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源。 (2)工作原理         CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应 以后就会对响应放行。 (3) 使用         主要是服务器端的设置:
app.all('/cors-server', (request, response)=>{
    //设置响应头(请求源/头/方法)
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // 开放指定域名下的资源
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});

参考:浏览器同源政策及其规避方法 - 阮一峰的网络日志 

           跨源资源共享(CORS) - HTTP | MDN

上一篇:js基础


下一篇:Script端口