同源策略：最早有Netscape公司提出，是游览器的一种安全机制，同源即来源必须相同，当前网页的url和请求目标资源的url的协议、域名、端口号都必须一致，违背同源策略就是跨域，Ajax策略默认支持同源策略。
Jsonp(JSON with padding)，是一个非官方的跨域解决方案，纯粹是凭借程序员的聪明才智开发出来的，只支持get请求。
网页中有一些标签天生就具有跨域能力，比如：img，link，iframe，script等。
JSONP就是利用script标签的跨域能力来发送Ajax请求的，通过script的src属性获取的是一个函数调用的字符串，同时这个字符串在script标签中需要有定义。
script标签为什么能够实现跨域？？？ajax请求存在跨域的问题，是由游览器中的Ajax引擎来判定的，script的src属性发的请求是由游览器引擎发的普通的http请求，不会受到Ajax引擎的限制，不存在跨域的问题。
//前端页面<body> 请输入用户名：<input type="text"> 请输入密码：<input type="password"><button>提交</button><script type="text/javascript">functionhasUser(username, password){if(username>=0& password>=0){ console.log("用户名和密码重复")}else{var str= username>=0|| password>=0?"用户名重复":"密码重复" console.log(str)}} window.onload=function(){var btn= document.getElementsByTagName("button")[0] btn.onclick=function(){var username= document.getElementsByTagName("input")[0].valuevar password= document.getElementsByTagName("input")[1].value//使用原生的js来实现jsonp//1 创建一个script标签var script= document.createElement("script")//2 设置script标签的src,即url,jsonp只能实现get请求，如果要将数据发送给后端服务器，//只能进行url的拼接，将数据放在url中发送给后端 url="http://127.0.0.1:8000/jsonp?username="+ username+"&password="+ password script.src= url//3 将script标签添加到页面中 document.body.appendChild(script)// console.log(`用户名为${username},密码为${password}`)}}</script>//后端页面//1.引入expressconst express=require("express")//2. 创建应用对象const app=express()//设置使用原生的js来实现jsonp进行跨域,判断用户名和密码是否已经存在 app.all("/jsonp",(request, response)=>{const usernames=["张三","李四","王五"]const passwords=["123456","666666","0a2345"]var username=request.query.usernamevar password=request.query.passwordvar uindex=usernames.indexOf(username)var pindex= passwords.indexOf(password) response.end(`hasUser(${uindex},${pindex})`)//最终返回给前端页面的是类似hasUser(1,0)的函数调用}) app.listen(8000,()=>{ console.log("服务已启动，8000端口监听中")})//前端页面<body> 请输入用户名：<input type="text"> 请输入密码：<input type="password"><button>提交</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script type="text/javascript">// 2 使用jQuery来实现JSONP$("button").on("click",function(){var username= document.getElementsByTagName("input")[0].valuevar password= document.getElementsByTagName("input")[1].value//在jQuery中url后必须带callback=?这个参数，这个就相当于原生中的hasUser()使得不再需要自己定义处理的函数了，//只需要在回调函数中对返回的数据进行处理就可以了 $.getJSON("http://127.0.0.1:8000/jsonp?callback=?",{username:username,password:password},function(data){ console.log(data)})})</script></body>//后端页面 app.all("/jsonp",(request, response)=>{const usernames=["张三","李四","王五"]const passwords=["123456","666666","0a2345"]var username=request.query.usernamevar password=request.query.passwordvar uindex=usernames.indexOf(username)var pindex= passwords.indexOf(password)const cb=request.query.callback//jQuery自带的回调函数，不需要自己定义函数了，直接在前端的回调函数中取数据就可以了 response.end(`${cb}([${uindex},${pindex}])`)})CORS(Cross-Origin Resource Sharing)，跨域资源共享。CORS是官方跨域解决方案，不需要在客户端做任何特殊操作，完全在服务器端处理，支持get和post请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS是怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
<body> //前端页面：不需要做任何更改，直接发送Ajax请求 请输入用户名：<inputtype="text"> 请输入密码：<inputtype="password"><button>提交button><scripttype="text/javascript">$("button").on("click",function(){//1 创建对象var xhr=newXMLHttpRequest()// 2 进行初始化设置var username= document.getElementsByTagName("input")[0].valuevar password= document.getElementsByTagName("input")[1].value url="http://127.0.0.1:8000/cors?username="+ username+"&password="+ password xhr.open("GET", url)// 3 发送请求 xhr.send()// 4 绑定事件 xhr.onreadystatechange=function(){if(xhr.readyState===4){//readyState一共有4个值：//0：初始化new XMLHTTPRequest()//1:if(xhr.status>=200& xhr.status<300){// 输出响应体 console.log(xhr.response)}}}})script>body>app.all("/cors",(request, response)=>{//设置响应头,来实现CORS的跨域 response.setHeader("Access-Control-Allow-Origin","*");//还可以设置允许进行跨域发送Ajax的网页的url,使用*表示对所有网页都允许// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");//设置允许网页能够设置任意的请求头 response.setHeader("Access-Control-Allow-Headers",'*');//设置允许网页所有的请求方法 response.setHeader("Access-Control-Allow-Method",'*');const usernames=["张三","李四","王五"]const passwords=["123456","666666","0a2345"]var username=request.query.usernamevar password=request.query.passwordvar uindex=usernames.indexOf(username)var pindex= passwords.indexOf(password)var str=JSON.stringify({ username:uindex, password:pindex}) response.end(str)})在这里插入代码片# HTTP HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。 约定, 规则 ## 请求报文 重点是格式与参数 行 POST /s?ie=utf-8 HTTP/1.1 请求行包含三部分内容： 请求类型(get,post...) url(可能带有参数) HTTP协议版本 头 Host: atguigu.com Cookie: name=guigu Content-type: application/x-www-form-urlencoded User-Agent: chrome 83 空行 体 username=admin&password=admin get请求的请求体为空，post请求请求体可以不为空 ## 响应报文 行 HTTP/1.1 200 OK 响应行包括三部分：HTTP协议版本 响应状态码 响应字符串 头 Content-Type: text/html;charset=utf-8 Content-length: 2048 Content-encoding: gzip 响应头：主要是对响应体的内容做一个描述 空行 体<html><head>head><body><h1>尚硅谷h1>body>html> 响应体：是主要的返回结果 * 404 * 403 * 401 * 500 * 200
Chile Address 版权所有
Powered by WordPress