同源策略和解决跨域

跨域相关

1.同源策略

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是浏览器的一种安全策略

同源：协议、域名、端口号必须完全相同，违背同源策略就是跨域

2.解决跨域

2.1JAONP

1. JSONP是什么

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

2. JSONP怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script

比如我们之前引入过，并没有报错，可以使用

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

JSONP 就是利用 script 标签的跨域能力来发送请求的

我们在 HTML 里加入以下内容

<div id="result"></div>
<script>
    function handle(data) {
        const result = document.getElementById('result');
        result.innerHTML = data.name;
    }
</script>
<script src="./js/app.js"></script>

app.js 代码

const data = {
    name: 'JSONP'
};
handle(data);

我们使用live-server服务启动项目后，可以获取到app.js对应的 HTTP 地址

我们替换下app.js的 src 地址

<script src="http://127.0.0.1:5500/12-JSONP/js/app.js"></script>

我们是不是可以将这个script脚本的 src 地址看成是服务端的方法地址？

不就是跟之前引入的jQuery和axios的 src 地址类似么，既然如此我们当然可以在服务端编写一个路由规则

app.all('/server-jsonp', (request, response) => {
    response.send('hello jsonp'); 
});

控制台报错

Uncaught SyntaxError: Unexpected identifier

但是查看下网络响应体信息，实际上是获取到的

因为script标签需要的是一个 JS 脚本代码，而现在获取到的却是一串字符，是无法进行解析的

所以我们需要修改服务端响应内容

const data = {
    name: 'JSONP'
};
let str = JSON.stringify(data);
// end 方法不会有特殊响应头
// 为了方便拼接，用模板字符串
response.end(`handle(${str})`); // 返回结果是一个函数调用

这次内容正常呈现，查看控制台没有报错信息，而且请求内容是我们编写的一串 JS 代码

3. JSONP的使用

HTML 代码

用户名：<input type="text" id="username">
<p></p>
<script>
    //声明handle函数
    function handle(data) {
        var input = document.querySelector('input');
        input.style.border = "solid 1px #f00";
        //修改p标签的提示文本
        var p = document.querySelector('p');
        p.innerHTML = data.msg;
    }
</script>
<script>
    const input = document.querySelector('input');
    input.onblur = () => {
        let username = this.username;
        // 1、创建一个 script 标签
        var script = document.createElement('script');
        // 2、设置 src 属性
        script.src = 'http://127.0.0.1:8000/check-username';
        // 3、将 script 插入文档中
        document.body.appendChild(script);
    };
</script>

服务端代码

app.all('/check-username', (request, response) => {
    const data = {
        exist: 1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data);
    response.end(`handle(${str})`); 
});

效果

4. jQuery 发送 JSONP 请求

$.getJSON(url,[data],[fn])

● url：发送请求地址
● data：待发送 key/value 参数
● callback：载入成功时回调函数

HTML 代码

<button>点击发送请求</button><br><br>
<div id="result"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $('button').eq(0).click(() => {
        $.getJSON('http://127.0.0.1:8000/server-jsonp-jquery?callback=?', data => {
            $('#result').html(data.msg);
        });
    });
</script>

服务端代码

app.all('/server-jsonp-jquery', (request, response) => {
    const data = {
        exist: 1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data);
    response.end(`(${str})`);
});

此时并没有任何输出，但是请求参数中自动生成了一个callback的参数

因为我们现在是通过live-server服务的5500端口访问的nodemon服务的8000端口，也就是说现在是跨域访问

所以需要返回一个 JS 脚本代码，但是我们就需要一个字符串作为返回结果啊，怎么办呢？

按照jsonp原生代码思路，我们是一定要返回一个 JS 脚本代码的

那么callback参数就排上用场了，我们需要改造下服务端代码

// 接收callback参数
var cb = request.query.callback;
response.end(`${cb}(${str})`);

效果

我们可以看到响应体内容已经自动获取了callback参数和服务端返回结果

2.2CORS

官网地址：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
1. CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
2. CORS怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
3. CORS的使用

HTML 代码

<button>点击发送请求</button><br><br>

<div id="result"></div>

<script>

    const btn = document.getElementsByTagName('button')[0];

    const result = document.querySelector('#result');

    btn.addEventListener('click', function () {

        const xhr = new XMLHttpRequest();

        xhr.open('GET', 'http://127.0.0.1:8000/server-cors');

        xhr.send();

        xhr.onreadystatechange = function () {

            if (this.readyState === 4 && this.status >= 200 && this.status < 300) {

                result.innerHTML = this.response;

            }

        };

    });

</script>

服务端代码

app.all('/server-cors', (request, response) => {

    response.send('Hello cors');

});

效果

我们要想进行跨域请求，必须在服务端返回结果时设置允许跨域的响应头

// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');

除此之外，还有一些 HTTP 响应首部字段
4. HTTP 响应首部字段

HTTP 响应首部字段	作用
Access-Control-Allow-Origin	指定了允许访问该资源的外域 URI
Access-Control-Expose-Headers	让服务器把允许浏览器访问的头放入白名单
Access-Control-Max-Age	指定了 preflight 请求的结果能够被缓存多久
Access-Control-Allow-Credentials	是否允许浏览器读取 response 的内容
Access-Control-Allow-Methods	指明了实际请求所允许使用的 HTTP 方法
Access-Control-Allow-Headers	指明了实际请求中允许携带的首部字段

我们一般这么使用，允许跨域、带有自定义头部信息、任意方法

response.setHeader("Access-Control-Allow-Origin", "*"); 

response.setHeader("Access-Control-Allow-Headers", "*"); 

response.setHeader("Access-Control-A1low-Method", "*");