手写JSONP - 技术栈

手写JSONP

ZXT2025-01-10 10:30

一、引言跨域问题在Web开发中是一个常见的挑战，它源于浏览器的安全机制，即同源策略（Same-Origin Policy）。该策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。理解跨域及其解决方法对于前后端分离的Web应用尤为重要。

二、跨域概念解析

同源策略同源策略是浏览器的一种安全措施，用于阻止一个源的文档或脚本访问另一个源的资源。这里的"源"指的是协议、域名和端口的组合。例如，example.com:8080 和 example.com 就被视为不同的源，因为它们使用了不同的协议和端口号。
CORS (Cross-Origin Resource Sharing) CORS 是一种机制，它使用额外的HTTP头来告知浏览器允许一个域上的网页访问另一个域上的资源。通过设置特定的响应头，服务器可以明确告诉浏览器哪些来源被允许请求其资源。

Access-Control-Allow-Origin：指定哪些源可以访问资源。 Access-Control-Allow-Methods：指定允许使用的HTTP方法。 Access-Control-Allow-Headers：指定允许发送的自定义HTTP头信息。

比如我们后端在8080端口启动一个服务器。之后前端去访问后端的接口：

js 复制代码

     fetch('http://localhost:8080')
        .then(res => res.json())
        .then(data => {
            console.log(data);
        })

可以看到报错了，这就是因为不同源，两个网址运行的端口不一样。

解决跨域的方法有很多，今天我们先来介绍JSONP (JSON with Padding) JSONP是一种利用

后端

js 复制代码

    res.end('callback('+data+')');

前端

js 复制代码

   funstion jsonp(url,back){
   const script = document.createElement('script');
   script.src =url;
   document.appendChild(script);
   window.callaback = callback;
   }
   
   jsonp('http://localhost:8080',function(data){
   console.log(data);
   }
   );