手写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);
   }
   );
   
相关推荐
codingandsleeping14 分钟前
一个简易版无缝轮播图的实现思路
前端·javascript·css
拉不动的猪1 小时前
简单回顾下插槽透传
前端·javascript·面试
爱吃鱼的锅包肉2 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
风清扬雨2 小时前
Vue3具名插槽用法全解——从零到一的详细指南
前端·javascript·vue.js
海盗强3 小时前
Vue 3 常见的通信方式
javascript·vue.js·ecmascript
oscar9993 小时前
JavaScript与TypeScript
开发语言·javascript·typescript
橘子味的冰淇淋~4 小时前
【解决】Vue + Vite + TS 配置路径别名成功仍爆红
前端·javascript·vue.js
leluckys4 小时前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
shoa_top5 小时前
JavaScript 数组方法总结
javascript
鱼樱前端5 小时前
让人头痛的原型和原型链知识
前端·javascript