手写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);
   }
   );
   
相关推荐
_未知_开摆7 分钟前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
喝拿铁写前端16 分钟前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
sen_shan19 分钟前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
lvbb661 小时前
框架修改思路
前端·javascript·vue.js
qq_456001651 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
try again!2 小时前
rollup.js 和 webpack
开发语言·javascript·webpack
逆袭的小黄鸭2 小时前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试
FanetheDivine2 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js
前端Hardy2 小时前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
Linhieng2 小时前
JS 解析 png 图片的分辨率(宽高)
javascript