Ajax跨域
Ajax同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 当前网页的url和Ajax请求的目标资源的url两者之间必须协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
同源演示：
<body>
<h1>NEFU</h1>
<button>点击获取用户数据</button>
<script>
const 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
服务器端：
const express = require('express');
const app = express();
app.get('/data', (request, response)=>{
response.send('用户数据');
});
app.listen(3000, ()=>{
console.log("服务已经启动...");
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
再说直白点这两个文件要在一个文件夹之中。
使用JSONP解决跨域问题
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
JSONP的工作原理：
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。
JSONP 的使用：
1.动态的创建一个 script 标签
var script = document.createElement("script");
- 1
2.设置 script 的 src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
- 1
- 2
- 3
- 4
3.将 script 添加到 body
document.body.appendChild(script);
- 1
4.服务器中路由的处理
router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
name:"孙悟空", age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
使用CORS解决跨域问题
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS的工作原理：
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
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');
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
注意点：
①Access-Control-Allow-Origin: * 表明，该资源可以被 任意 外域访问。
Access-Control-Allow-Origin: <origin> | *
- 1
如果服务端仅允许来自 https://foo.example 的访问，该首部字段的内容如下：
Access-Control-Allow-Origin: https://foo.example
- 1
②Access-Control-Allow-Headers头让服务器把允许浏览器访问的头放入白名单，例如：
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
- 1
这样浏览器就能够通过 getResponseHeader 访问 X-My-Custom-Header 和 X-Another-Custom-Header 响应头了。
③Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。
默认是GET、POST方法请求可以，如果想用其他方法发送请求例如PUT，DELETE，就要在服务器端指明这个字段
Access-Control-Allow-Methods: <method>[, <method>]*
- 1
文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/zyb18507175502/article/details/123967471
- 点赞
- 收藏
- 关注作者
评论（0）