同源策略
同源策略：当前页面的url和ajax请求目标资源是同源的
同源：协议、域名、端口号必须完全相同
违背同源策略就是需要跨域
先请求的服务器资源，服务器在返回的页面，这样是达到同源策略的标准
<button style="background: rgb(219, 130, 13);">
点击发送同源策略请求
</button>
<div id="result">
</div>
<script>
/**
* 同源策略：当前页面的url和ajax请求目标资源是同源的
* 同源：协议、域名、端口号必须完全相同
* 违背同源策略就是需要跨域
* */
const btn = document.getElementsByTagName("button")[0];
const result = document.getElementById('result');
btn.addEventListener('click',() => {
const x = new XMLHttpRequest();
//因为是先请求的服务器资源，服务器在返回的页面，这样是属于同源策略的，那么url就可以简写
x.open("Get",'/data');
x.send()
x.onreadystatechange = () => {
if(x.readyState == 4){
//服务器有可能返回 304 自从上次请求后，请求的网页未修改过。
if(x.status >= 200 && x.status < 300){
result.innerHTML = x.response
}
}
}
})
</script>
const express = require('express');
const app = express();
app.get('/home',(resquset,response) => {
//sendFile: 传输给定的文件path __dirname：当前文件上一级目录路径
response.sendFile(__dirname+'/同源策略.html')
})
app.get('/data',(resquset,response) => {
let a = 1
a = JSON.stringify(a)
response.send(a)
})
app.listen(8009,() => {
console.log('同源策略请求已准备')
})
jsonp跨域
JSONP跨域的原理：主要就是利用了 script 标签的src没有跨域限制来完成的 只能用于get请求
<div id="result">
</div>
<script>
/**
* JSONP的原理：主要就是利用了 script 标签的src没有跨域限制来完成的 只能用于get请求
* 步骤：
* 1.通过script标签向服务器发送get请求，
* 2.服务器返回getData方法调用和赋值
* 3.getData方法调用，形参赋值，接受值向result赋值
* */
function getData(data) {
const result = document.getElementById('result');
result.innerHTML = data.name
}
</script>
<script src="http://192.168.3.232:8010/data"></script>
const express = require('express');
const app = express();
app.get('/data',(resquset,response) => {
let a = {
name : '阿森'
}
a = JSON.stringify(a)
response.send(`getData(${a})`)
})
app.listen(8010,() => {
console.log('JSONP请求已准备')
})
JSONP跨域实践
用户名：<input type="text" id="name">
<p></p>
<script>
const input = document.getElementById('name');
const p = document.querySelector('p');
//声明judge函数
function judgeName(data){
//更改input边框颜色
input.style.border = "solid 1px #f00"
//更改p标签的内容
p.innerHTML = data.msg;
}
//input标签失去光标的时，执行事件
input.onblur = () => {
//获取用户输入的值
let uName = this.value;
//向服务器发送请求
//1.第一步：创建script标签
const script = document.createElement("script")
//2.第二步：设置src 发送get请求
script.src = "http://192.168.0.102:8011/check-server"
//3.第三步：向body插入script标签 实例化script
document.body.appendChild(script);
}
</script>
const { response } = require('express');
const express = require('express');
const app = express();
app.all('/check-server',(request,response) => {
let data = {
exist : 1,
msg : "用户名已经存在"
}
data = JSON.stringify(data);
response.send(`judgeName(${data})`)
})
app.listen(8011,()=>{
console.log("jsonp实践已经启动")
})
jQuery发送json请求
<button style="background: rgb(219, 130, 13);">
点击发送jsonp请求
</button>
<div id="result">
</div>
<script>
//jquery之ajax自定义请求
$("button").eq(0).click(() => {
//jquery jsonp固定写法在请求接口后面拼接 ?callback=?
$.getJSON("http://192.168.0.102:8012/jquery-jsonp?callback=?",(data)=>{
$("#result").html(data.name)
})
})
</script>
//引用express模块
const express = require('express');
//实例化对象
const app = express();
//规划路由
//接受所有请求 如果设置自定义请求头需要在all事件接收
app.all('/jquery-jsonp',(resquset,response)=>{
//设置响应体
//设置传送数据 手动数据转json
let obj = {
name : 'asen',
age: '18',
}
obj = JSON.stringify(obj)
//jquery jsonp中需要接受callback值
let callback = resquset.query.callback;
//send方法中只能传输 字符串 和 buffer（0,1组成的数据）
response.send(`${callback}(${obj})`);
})
//监听服务启动
app.listen(8012,()=>{
console.log('jquery-jsonp请求准备完毕')
})
CORS跨域
在请求方法中设置请求头信息
response.setHeader('Access-Control-Allow-Origin','*')
例如
app.get('/server',(resquset,response)=>{
// console.log(response)
//设置允许自定义请求头
// response.setHeader('Access-Control-Allow-Headers','*')
//设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
//设置传送数据 手动数据转json
let obj = {
name : 'asen',
age: '18',
}
obj = JSON.stringify(obj)
response.send(obj);
})
