跨域初识--如何解决跨域

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 来设置响应头，来允许跨域请求
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
    res.set("Access-Control-Allow-Origin","*");//允许所有来源访问
    res.send("testAJAX 返回的响应");
});