同源策略与跨域问题解决

2021-12-18 10:05:39 阅读：188 来源： 互联网

标签：浏览器跨域 script 同源 const response 策略

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

标签：浏览器,跨域,script,同源,const,response,策略
来源： https://blog.csdn.net/weixin_45719444/article/details/122008300

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

同源策略与跨域问题解决

同源策略(Same-Origin Policy)

如何解决跨域问题

1、JSONP

2、CORS