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

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

1. CORS 是什么？
   CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
   案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
   get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些
   源站通过浏览器有权限访问哪些资源

2. CORS 怎么工作的？
   CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
   以后就会对响应放行。

3. 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 返回的响应");
});