手写JSONP

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

二、跨域概念解析

  1. 同源策略 同源策略是浏览器的一种安全措施,用于阻止一个源的文档或脚本访问另一个源的资源。这里的"源"指的是协议、域名和端口的组合。例如,example.com:8080example.com 就被视为不同的源,因为它们使用了不同的协议和端口号。

  2. 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);
   }
   );
   
相关推荐
闭着眼睛学算法1 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴1 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.1 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰1 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息1 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
北城以北88882 小时前
JavaScript--基础ES(一)
开发语言·javascript·intellij-idea
珍宝商店3 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
宋辰月3 小时前
echarts项目积累
前端·javascript·echarts
醉方休4 小时前
TensorFlow.js高级功能
javascript·人工智能·tensorflow
炒香菇的书呆子4 小时前
基于Amazon S3设置AWS Transfer Family Web 应用程序
javascript·aws