手写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);
   }
   );
   
相关推荐
吃饭睡觉打豆豆嘛39 分钟前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible1 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12042 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy2 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_13 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子3 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路4 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html