【AJAX】第五部分跨域

文章目录

【AJAX】第五部分跨域
5.跨域
总结

提示：以下是本篇文章正文内容，下面案例可供参考

5.跨域

5.1 同源策略

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

同源：协议、域名、端口号必须完全相同

跨域：违背同源策略就是跨域

5.1.1 同源策略的案例

html代码

  <h1>同源策略</h1>
    <button>点击我获取数据</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function(){
            let xhr = new XMLHttpRequest()

            xhr.open('GET','http://127.0.0.1:8000/data')

            xhr.send()

            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4)
                {
                    if(xhr.status >= 200 && xhr.status < 300)
                    {
                        console.log(xhr.response);
                    }
                }
            }
        }
    </script>

js代码

const express = require('express')

const app = express()

app.get('/home',(request,response)=>{
    // _dirname表示绝对路径
    //sendFile()表示的是响应一个网页
    response.sendFile(__dirname +'/index.html')
})

app.get('/data',(request,response)=>{
    response.send('Hello!')
})

app.listen(8000,()=>{
    console.log('服务端口已启动！！！');
})

5.2 JSONP实现原理

JSONP就是利用在网页中一些标签天生具有跨域能力，比如：img 、link、 iframe 、script

JSONP不是官方推出解决跨域的方法，是程序员想出来的办法

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

下面例子演示5500端口向8000端口请求数据

注意：用script标签请求服务端，服务端要返回的是js代码不能直接传字符串

html代码

  <div class="box" style="width: 200px; height: 200px ; border: 1px solid black;"></div>
    <script>
       function jsondata (data){
            const box = document.querySelector('.box')
            box.innerHTML = data.name
       }
    </script>
		//利用script跨域的能力去向服务端请求
    <script src="http://127.0.0.1:8000/JSONP-server"></script>

js代码

const express = require('express')

const app = express()

app.all('/JSONP-server',(req,res)=>{
    /*
        用script标签请求服务端，服务端要返回的是js代码不能直接传字符串 
        如果需要传的数据很多可以写成函数进行调用
     */
    //res.send("console.log('hello JSONP!!')") //hello JSONP!!
    const data = {
        name:"Jack",
        age:18,
        gender:"male"
    }
    // 需要做类型转换
    const str = JSON.stringify(data)
    
    res.end(`console.log(jsondata(${str}))`)
})

app.listen(8000,(()=>{
    console.log('8000端口已启动！！！');
}))

5.3 JSONP的小案例

实现的是先服务端发送请求，服务端对比用户名是否已经被注册，但是没有服务器所以是模拟的并没有做判断

html代码

<input type="text">
    <p></p>
    <script>
        let inp = document.querySelector('input')
        let  p = document.querySelector('p')
        // 声明一个handle函数
        function handle(data){
            //获取用户名
            let username = inp.value
            inp.style.border = "1px solid red"
            p.innerHTML = data.message
            p.style.color = "red"
        }
        
        //给input绑定失去焦点事件
        inp.onblur = function(){
            if(!inp.value.trim()) 
            {
                return alert('输入的值不能为空！'); 
            }
            //创建一个script标签
            let script = document.createElement('script')
            //设置src
            script.src = 'http://127.0.0.1:8000/JSONP-username'
            //将script标签插入到body中去，这样才能向服务端发送请求
            document.body.appendChild(script)
        }
    </script>

js代码

const express = require('express')

const app = express()

app.all('/JSONP-username',(req,res)=>{
    const data = {
       exit:'1',
       message:'用户名已经存在！请换一个新的名字！'
    }
    const str = JSON.stringify(data)
    
    res.end(`handle(${str})`)
})

app.listen(8000,(()=>{
    console.log('8000端口已启动！！！');
}))

5.4 jQuery发送JSONP

html代码

    <button>点击我</button>
    <div class="wrapper" style="width: 200px; height: 200px; border: 1px solid black;"></div>
    <script>
        $('button').click(function(){
            // url后面要加  ?callback=? 固定写法
            $.getJSON('http://127.0.0.1:8000/jq-JSONP-server?callback=?',function(data){
                $('.wrapper').html(`
                    学校名称：${data.name}<br/>
                    学校地址：${data.city}
                `)
             })
        })
    </script>

js代码

const express = require('express')

const app = express()

app.all('/jq-JSONP-server',(req,res)=>{
    // end表示不需要设置响应头
    const data = {
        name:"尚硅谷",
        city:['北京','上海']
    }
    let str = JSON.stringify(data)

    // 在这里需要去接收callback参数,用这个参数去解析，返回的数据记得加（）
    const fun = req.query.callback 
    res.end(`${fun}(${str})`)
})

app.listen(8000,function(){
    console.log('8000端口已启动！！！')
})

5.5 CORS

CORS文档

5.5.1 CORS 是什么？

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

5.5.2 CORS 怎么工作的？

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

5.5.3 CORS 的使用

html代码

 <button>点击我</button>
    <div class="box" style="width: 200px ; height: 200px ; border: 1px solid black;"></div>
    <script>
        const btn = document.querySelector('button')
        const box = document.querySelector('.box')
        btn.onclick = function(){
             let xhr = new XMLHttpRequest()
             xhr.open('GET','http://127.0.0.1:8000/server-CORS')
             xhr.send()
             xhr.onreadystatechange = function(){
                  if(xhr.readyState === 4)
                  {
                      if(xhr.status >= 200 && xhr.status < 300)
                      {
                          box.innerHTML = xhr.response
                      }
                  }
             }
        }
    </script>

js代码

const express = require('express')

const app = express()

app.all('/server-CORS',(req,res)=>{
    //设置响应头
    // *表示通用，如果想要具体指定某一个url可以在内容里面写
    // res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
  
    res.setHeader('Access-Control-Allow-Origin','*')  //表示允许跨域
    res.setHeader('Access-Control-Allow-Headers','*') //表示允许自定义头
    res.setHeader('Acccess-Control-Allow-Method','*') //表示允许任意请求方法

    res.send('Hello,CROS!!!!')
})

app.listen(8000,()=>{
    console.log("8000端口已启动！！！");
})