同源策略和跨域请求的实现
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、什么是同源策略
如果两个 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里