AJAX学习-3 跨域

第三章跨域

3.1同源策略

同源策略(Same-Origin Policy)最早由Netscape公司提出,是浏览器的一种安全策略.
同源: 协议域名端口号 必须完全相同.同源即同一个来源,同一个服务器就是同源.
违背同源策略就是跨域.服务器增加时就会出现跨域.
同源策略小案例:
首先我们新写一个server.js:

const { response } = require("express");
const express = require("express");

const app = express();

app.get("/home",(request,response) =>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');
})
app.get("/data",(request,response)=>{
    response.send("用户数据");
})

app.listen(9000, () =>{
    console.log("服务已经启动....当前端口为9000");
})

然后回到该文件的上一层目录打开终端,使用nodemon server.js开启服务,然后在该目录下新建一个index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>尚硅谷</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.getElementsByTagName("button")[0];
        btn.onclick = function(){
           const xhr = new XMLHttpRequest();
           // 这里满足同源策略,所以url可以简写
           xhr.open("GET","/data");
           xhr.send();
           xhr.onreadystatechange = function(){
               if(xhr.readyState == 4){
                   if(xhr.status >= 200 && xhr.status < 300){
                       console.log(xhr.response);
                   }
               }
           }
        }
    </script>
</body>
</html>

然后我们打开浏览器,输入http://127.0.0.1:9000/home即可加载页面.

点击下按钮,在开发者工具中Console栏中即可看到用户数据信息.

3.2 如何解决跨域

3.2.1 JSONP

JSONP是什么?
JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,仅仅支持get请求.
JSONP怎么工作的?
在网页中有一些标签本来具有跨域能力,比如: img link iframe script.
JSONP 就是利用script标签的跨域能力来发送请求的.
JSONP的使用
1.动态的创建一个script标签
var script = document.createElement("script");
2.设置script的src
script.src="http:localhost:3000/testAJAX";
3.设置或编写script的回调函数
4.将script插入到文档中
document.body.appendChild(script);
具体实践代码如下:
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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.getElementsByTagName("input")[0];
        const p = document.getElementsByTagName("p")[0];
        //声明handle函数
        function handle(data){
            input.style.border = "solid 1px red";
            //修改p 标签的提示文本
            p.innerHTML = data.msg;
            
        }
        
       
        // 绑定事件
        input.onblur = function(){
            // 获取用户的输入值
            const 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>

服务器中路由规则的js代码:

//jsonp服务
app.all("/jsonp-server",(request,response)=>{
    // response.send('console.log("hello jsonp")');
    const data = {
        name:"尚硅谷atguigu"
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果 返回函数调用,把参数放里面 让前端的函数对它进行处理
    response.send(`handle(${str})`);
});

3.2.2 CORS

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

//设置响应头 *表示通配
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Headers","*");
response.setHeader("Access-Control-Allow-Methods","*");

posted @ 2021-09-27 20:55 bleaka 阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

bleaka