当前位置：首页 > news >正文

同源策略和跨域请求的实现

news 来源：原创 2024/11/20 12:32:15

一、什么是同源策略

如果两个 URL 的 protocol、port (en-US) (如果有指定的话) 和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。（“元组”是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

| centered 文本居中 | right-aligned 文本居右 |

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是 80)
http://news.company.com/dir/other.html	失败	主机不同

说大白话就是防止不是来自同一个源头的js脚本互相通信，这个源头可以是服务器
如果两个js是来自同一个服务器端口是可以传数据的

二、同源数据传输例子

服务端

let express=require("express")
const app=express()
app.get("/index",(require,response)=>{
    response.sendFile(__dirname+"/indexa.html")//__dirname是绝对路径
})//浏览器请求默认是get，设置post请求浏览器输入网址无效
app.get("/data",(require,response)=>{
    response.send("用户的数据")
})
app.all("/jsonp",(require,response)=>{
   const data={
    exist:1,
    msg:"用户名以及存在"
   }
   let str=JSON.stringify(data)
   response.end(`handle(${str})`)
})
app.listen(3101,()=>{
    console.log("启动成功了")
})

客户端：

<!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">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
   <label >
    用户名<input type="text" >
    <p></p>
   </label>
   
    <!-- <script src="./ajax_jsonp.js"></script>//script标签自带跨域效果，且默认为全局变量 -->
    <script>
       let input=document.querySelector("input")
       let p=document.querySelector("p")
       function handle(data){
        input.style.border="10px #10b solid"
        p.innerText=data.msg
       }
       input.onblur=function(){
        let name=this.value 
        let onscript=document.createElement("script")
        onscript.src="http://127.0.0.1:3101/jsonp"
        document.body.appendChild(onscript)

       }
    </script>   
</body>
</html>

注意事项：
以vscode为例：
是在服务器端请求页面后在请求数据，而不是以本地文件，或者插件的模式打开
因为文件的形式file:///D:/%E6%96%B0%E5%BE%81%E7%A8%8B/ajax/ajax_jsonp.html
live server的
http://127.0.0.1:5500/ajax_jsonp.html
服务端的url
http://127.0.0.1:5500/
上面的两个url都会跨域
先输入服务端地址加上路由 /index
服务端会发送html页面
在这里插入图片描述
然后这是的页面url是http://127.0.0.1:5500/
然后改页面向url是http://127.0.0.1:5500/的服务端请求数据，
这样一定是同源

很多时候页面和数据都是同一台服务器发送的，这样可以避免跨域问题

三、jsonp野路子(不推荐，了解一下就行)

可以参考下我之前的文章,点击查看下

四、 response.setHeader的设置

response.setHeader("Access-Control-Allow-Origin","*")
在服务端里加入这么一行代码跨域问题就简单解决了
这个是允许所有的url客户端可以访问，你可以换成相应的url
样例
客户端：


<!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>Document</title>
</head>
<body>
    <button>发送ajax请求</button>
    <div id="result">
    </div>
</body>
<script>
    const btn=document.querySelector("button")
    const div=document.getElementById("result")
    btn.onclick=function(){
        const x=new XMLHttpRequest()
        x.open("GET","http://127.0.0.1:3101/cros")
        x.send()
        x.onreadystatechange=function(){
            if(x.readyState==4){
                if(x.status>=200&x.status<300){
                    console.log(x.response)
                }
            }
        }
        }
</script>
</html>

服务端:

let express=require("express")
const app=express()
app.all("/cros",(require,response)=>{
    // response.setHeader("Access-Control-Allow-Origin","*")
    response.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:5500")
    response.setHeader("Access-Control-Allow-Method","*")//允许的请求方法，如果get,post,这里是全部
    response.setHeader("Access-Control-Allow-Headers","*")//允许自定义的头属性
    response.end("cros")
 })
app.listen(3101,()=>{
    console.log("启动成功了")
})

运行截图：
在这里插入图片描述

五、温故而知新

response.setHeader的其他经常用的设置
response.setHeader(“Access-Control-Allow-Origin”,“http://127.0.0.1:5500”)//允许指定的url请求
response.setHeader(“Access-Control-Allow-Method”,““)//允许的请求方法，如果get,post,这里是全部
response.setHeader(“Access-Control-Allow-Headers”,””)
//允许自定义的头属性，原生的ajax不加，http的响应报文头不能有自定义键值对
axios不影响，因为可以自己写在headers里