04 【跨域初识】

1.同源策略

同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
同源：协议、域名、端口号必须完全相同
跨域：违背同源策略就是跨域

2.如何解决跨域

2.1 JSONP

jsonp只支持get请求不支持post请求

1) JSONP 是什么

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

2) JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用script 标签的跨域能力来发送请求的。

3) JSONP 的使用

html代码

            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username?callback=abc';
            //3. 将script 添加到body 中
            document.body.appendChild(script);
            function abc(data) {
                alert(data.name);
            };

nodejs 代码

app.get("/check-username" , function (req , res) {
    var callback = req.query.callback;
    const data = {
        name: '孙悟空'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果(一段可执行的JavaScript代码)
    response.end(`handle(${str})`);
});

2.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

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

CORS 的使用 主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
    res.set({
    // 允许的请求源
    'Access-Control-Allow-Origin': '127.0.0.1',
    // 允许的请求方法，默认只支持post,get,head
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
    // 允许的请求头支持Content-Type（默认不支持json）
    'Access-Control-Allow-Headers': 'Content-Type',
    // 允许前端读取自定义响应头yage
    'Access-Control-Expose-Headers': 'yage',
    // 允许凭据随请求发送
    'Access-Control-Allow-Credentials': true
  })
    res.send("testAJAX 返回的响应");
});

04 【跨域初识】 ​

1.同源策略 ​

2.如何解决跨域 ​

2.1 JSONP ​

2.2 CORS ​

04 【跨域初识】

1.同源策略

2.如何解决跨域

2.1 JSONP

2.2 CORS