怎么做淘宝客网站推广,做网页收款网站,山西怀仁建设银行,太原seo建站文章目录 1 同源策略1.1 index.html1.2 server.js 2 如何解决跨域2.1 JSONP2.1.1 JSONP 原理2.1.2 JSONP 实践2.1.3 jQuery 中的 JSONP 2.2 CORS2.2.1 CORS实践 3 server.js 1 同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出#xff0c;是浏览器的一种安全策… 文章目录 1 同源策略1.1 index.html1.2 server.js 2 如何解决跨域2.1 JSONP2.1.1 JSONP 原理2.1.2 JSONP 实践2.1.3 jQuery 中的 JSONP 2.2 CORS2.2.1 CORS实践 3 server.js 1 同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出是浏览器的一种安全策略。
同源协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
1.1 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title首页/title
/head
bodyh1尚硅谷/h1button点击获取用户数据/buttonscriptconst btn document.querySelector(button);btn.onclick function(){const x new XMLHttpRequest();//这里因为是满足同源策略的, 所以 url 可以简写x.open(GET,/data);//发送x.send();//x.onreadystatechange function(){if(x.readyState 4){if(x.status 200 x.status 300){console.log(x.response);}}}}/script
/body
/html1.2 server.js
const express require(express);const app express();app.get(/home, (request, response){//响应一个页面response.sendFile(__dirname /index.html);
});app.get(/data, (request, response){response.send(用户数据);
});app.listen(9000, (){console.log(服务已经启动...);
});2 如何解决跨域
2.1 JSONP
JSONP 是什么 JSONP(JSON with Padding)是一个非官方的跨域解决方案只支持 get 请求。JSONP 怎么工作的 在网页中有一些标签天生具有跨域能力比如img、link、iframe、scriptJSONP 就是利用 script 标签的跨域能力来发送请求的。JSONP 的使用 动态的创建一个 script 标签 var script document.createElement(script);设置 script 的 src设置回调函数 script.src http://localhost:3000/testAJAX?callbackabc;
function abc(data) {alert(data.name);
};将 script 添加到 body 中 document.body.appendChild(script);服务器中路由的处理 router.get(/testAJAX, function (req, res) {console.log(收到请求);var callback req.query.callback;var obj {name:孙悟空, age:18}res.send(callback(JSON.stringify(obj)));
});2.1.1 JSONP 原理
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title原理演示/titlestyle#result {width: 300px;height: 100px;border: solid 1px #78a;}/style
/headbodydiv idresult/divscript//处理数据function handle(data) {//获取 result 元素const result document.getElementById(result);result.innerHTML data.name;}/script!-- script srchttp://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js/script --script srchttp://127.0.0.1:8000/jsonp-server/script
/body
/htmlconst data {name: 尚硅谷atguigu
};handle(data);2.1.2 JSONP 实践
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title案例/title
/head
body用户名: input typetext idusernamep/pscript//获取 input 元素const input document.querySelector(input);const p document.querySelector(p);//声明 handle 函数function handle(data){input.style.border solid 1px #f00;//修改 p 标签的提示文本p.innerHTML data.msg;}//绑定事件input.onblur function(){//获取用户的输入值let username this.value;//向服务器端发送请求 检测用户名是否存在//1. 创建 script 标签const script document.createElement(script);//2. 设置标签的 src 属性script.src http://127.0.0.1:8000/check-username;//3. 将 script 插入到文档中document.body.appendChild(script);}/script
/body
/html2.1.3 jQuery 中的 JSONP
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlejQuery-jsonp/titlestyle#result{width:300px;height:100px;border:solid 1px #089;}/stylescript crossoriginanonymous srchttps://cdn.bootcss.com/jquery/3.5.0/jquery.min.js/script
/head
bodybutton点击发送 jsonp 请求/buttondiv idresult/divscript$(button).eq(0).click(function(){//固定写法callback??实际上是一串数字-request.query.callback$.getJSON(http://127.0.0.1:8000/jquery-jsonp-server?callback?, function(data){$(#result).html(名称: ${data.name}br校区: ${data.city})});});/script
/body
/html2.2 CORS
文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS CORS 是什么 CORSCross-Origin Resource Sharing跨域资源共享。CORS 是官方的跨域解决方案它的特点是不需要在客户端做任何特殊的操作完全在服务器中进行处理支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段允许服务器声明哪些源站通过浏览器有权限访问哪些资源。 CORS 怎么工作的 CORS 是通过设置一个响应头来告诉浏览器该请求允许跨域浏览器收到该响应以后就会对响应放行。 CORS 的使用 主要是服务器端的设置 router.get(/testAJAX, function (req, res) {//通过 res 来设置响应头来允许跨域请求//res.set(Access-Control-Allow-Origin, http://127.0.0.1:3000);res.set(Access-Control-Allow-Origin, *);res.send(testAJAX 返回的响应);
});2.2.1 CORS实践
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCORS/titlestyle#result{width:200px;height:100px;border:solid 1px #90b;}/style
/head
bodybutton发送请求/buttondiv idresult/divscriptconst btn document.querySelector(button);btn.onclick function(){//1. 创建对象const x new XMLHttpRequest();//2. 初始化设置x.open(GET, http://127.0.0.1:8000/cors-server);//3. 发送x.send();//4. 绑定事件x.onreadystatechange function(){if(x.readyState 4){if(x.status 200 x.status 300){//输出响应体console.log(x.response);}}}}/script
/body
/html3 server.js
//1. 引入express
const express require(express);//2. 创建应用对象
const app express();//3. 创建路由规则
//request对请求报文的封装
//response对响应报文的封装
app.get(/server, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);//设置响应体response.send(hello Ajax);
});//all可以接受任意类型的请求
app.all(/server, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);//响应头*所有类型的头信息都可以接受response.setHeader(Acess-Control-Allow-Headers, *);//设置响应体response.send(hello Ajax POST);
});//JSON 响应
app.all(/json-server, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);//响应头response.setHeader(Acess-Control-Allow-Headers, *)//响应一个数据const data {name: atguigu};//对对象进行字符串转换let str JSON.stringify(data);//设置响应体response.send(str);
});//针对IE缓存
app.get(/ie, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);//设置响应体response.send(hello IE);
});//延时响应
app.all(/delay, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);response.setHeader(Acess-Control-Allow-Headers, *);setTimeout(() {//设置响应体response.send(延时响应);}, 3000);
});//jQuery 服务
app.all(/jquery-server, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);response.setHeader(Acess-Control-Allow-Headers, *);const data {name: 尚硅谷};response.send(JSON.stringify(data));
});//axios 服务
app.all(/axios-server, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);response.setHeader(Acess-Control-Allow-Headers, *);const data {name: 尚硅谷};response.send(JSON.stringify(data));
});//fetch 服务
app.all(/fetch-server, (request, response) {//设置响应头设置允许跨域response.setHeader(Acess-Control-Allow-Origin, *);response.setHeader(Acess-Control-Allow-Headers, *);const data {name: 尚硅谷};response.send(JSON.stringify(data));
});//jsonp 服务
app.all(/jsonp-server, (request, response) {//response.send(console.log(hello jsonp));const data {name: 尚硅谷atguigu};//将数据转化为字符串let str JSON.stringify(data);//返回结果response.end(handle(${str}));//返回结果是一个函数调用函数的实参就是想给客户端返回的结果数据函数必须提前声明。
});//用户名检测是否存在
app.all(/check-username, (request, response) {//response.send(console.log(hello jsonp));const data {exist: 1,msg: 用户名已经存在};//将数据转化为字符串let str JSON.stringify(data);//返回结果response.end(handle(${str}));
});//jquery-jsonp
app.all(/query-jsonp-server, (request, response) {//response.send(console.log(hello jsonp));const data {name: 尚硅谷,city: [北京, 上海, 深圳]};//将数据转化为字符串let str JSON.stringify(data);//接收callback参数let cb request.query.callback;//返回结果response.end(${cb}${str});
});//cors
app.all(/cors-server, (request, response) {//设置响应头response.setHeader(Access-Control-Allow-Origin, *);response.setHeader(Access-Control-Allow-Headers, *);response.setHeader(Access-Control-Allow-Method, *);//response.setHeader(Access-Control-Allow-Origin, http://127.0.0.1:5500);response.send(hello cors);
});//4. 监听窗口启动服务
app.listen(8000, () {console.log(服务已经启动8000端口监听中......);
});
