AJAX解决跨域问题（jsonp和cors）

lsrxz

已于 2023-09-09 11:04:07 修改

阅读量183

点赞数

分类专栏： AJAX 文章标签： ajax javascript 前端

于 2023-05-02 13:14:06 首次发布

本文链接：https://blog.csdn.net/lsrxz/article/details/130462506

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

跨域是浏览器的安全策略，限制了不同源之间的交互。JSONP是一种非官方的解决跨域的方案，通过动态创建script标签实现GET请求的跨域。CORS是官方的跨域解决方案，通过设置特定的HTTP响应头，允许指定源或所有源进行跨域请求，支持GET和POST等更多请求类型。

摘要由CSDN通过智能技术生成

跨域

跨域是针对同源策略提出的，是浏览器的一种安全策略。同源策略是指协议、域名、端口号必须完全相同，违背了同源策略就是跨域。

JSONP方法

什么是jsonp

JSON with Padding 带填充的JSON
jsonp是非官方的解决跨域方法，只支持get请求.
网页中有一些标签本来就具有跨域能力，例如img /link /iframe /script，jsonp就是利用script标签的跨域能力来发送请求的

json是怎么工作的

动态的创建一个script标签

var script = document.createElement("script");

设置script的src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
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)+")");
});

CORS方法

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

什么是CORS

CORS（Cross-Origin Resource Sharing），跨域资源共享。是官方的跨域解决方案
不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持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 返回的响应");
});