【JS】js处理跨域的方案之一:jsonp 详解

server/2024/12/14 4:26:18/
文章目录
    • 1. 引言
    • 2. 同源策略和跨域
    • 3. html 存在的特殊情况
    • 4. JSONP
    • 5. JSONP优缺点
    • 参考链接

1. 引言

在实际开发中,数据都是后端返回的,那就需要前端调用后端的接口,来拿到数据

前端中调接口的方式一般有如下三种

  1. Ajax
  2. fecth
  3. axios 这个是最常用的

涉及到调后端接口的话,后端的接口和前端肯定不在一个端口,甚至不在一个 域名下,这样就会导致跨域

在这里插入图片描述

fetch('https://editor.csdn.net/md?not_checkout=1&spm=1011.2415.3001.6217&articleId=141032145')

因为请求的主机地址 和 请求的地址, 协议端口域名都不一样,所以导致了 跨域

2. 同源策略和跨域

同源策略
同源:协议域名端口,三者全部相同,才是同源。

同源策略是浏览器最核心也最基本的安全机制,它限制了来自不同源(即域、协议或端口)的文档或脚本之间的交互操作。
具体来说,同源策略要求如果两个页面的协议、域名和端口均相同,则它们被视为同源,否则即为非同源。

根据同源策略,浏览器只允许当前网页与同一源下的其他资源进行交互,包括读取和修改。
换句话说,JavaScript脚本在一个源中加载的页面只能与同一源中的页面进行通信,而无法直接对不同源的页面进行读写操作。

同源策略的主要目的是防止恶意网站窃取或篡改其他网站的敏感信息,从而保护用户的隐私和安全。

跨域

协议、域名、端口,只要有一个的不同,就是跨域。

URL

是否跨域

备注

http://www.baidu.com/1.html 和 http://www.baidu.com/2.html

协议端口域名一样,即为同源

http://www.baidu.com/1.html 和 http://www.csdn.com/2.html

域名不同

http://www.baidu.com:7000/1.html 和 http://www.baidu.com:8000/2.html

端口不同

https://www.baidu.com/1.html 和 http://www.baidu.com/2.html

协议不同

注意: localhost 和 127.0.0.1 也是构成了跨域

3. html 存在的特殊情况

html 中 有以下几个标签, 是可以引入与当前页面不同(跨域) 的地址的

  • script标签
  • img 标签
  • link 标签
  • video 标签
  • audio 标签
  • iframe 标签

4. JSONP

JSONP 其实是 跨域的一种解决方案 JSONP 全称“JSON with Padding”,译为“带回调的 JSON”,它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略,进行跨域请求。

jsonp 的本质是:利用 script 标签的src 属性 不受跨域的影响 。

前端具体操作

  1. 在JS脚本中,先 定义一个函数 用来处于后端返回的数据
  2. 通过js 脚本,创建 script 标签,src 设置为后端接口地址,并且请求地址中加上 第一步定义的函数名称
  3. 把这个 script 插入到DOM中,调用接口

后端具体操作

  1. 开启一个接口服务
  2. 解析出来请求地址查询参数中的callback 的值
  3. 返回文本类型,格式是 callback的值(后端数据) 比如:abc([{name:”1"},{ name:“2” }]) 服务器返回的内容,必须是一段可执行的 JavaScript 代码,不能是其它内容

前端代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button>点击调用接口</button><script>function getUser(list) {console.log('user', list);// 创建一个新的空白的文档片段let fragment = document.createDocumentFragment();list.forEach(item => {let div = document.createElement('div');div.innerHTML = item.name;fragment.appendChild(div);});document.body.appendChild(fragment);}document.querySelector('button').onclick = function () {// 1、创建script 标签let scriptEl = document.createElement('script');// 2、设置 src 地址,并且传递过去 处理返回数据的函数名称scriptEl.src = 'http://127.0.0.1:8080/api/getUserList?callback=getUser';// 3、插入到DOMdocument.body.appendChild(scriptEl);}</script>
</body></html>

后端代码如下

const htpp = require("http");
const url = require("url");
const querystring = require("querystring");const userList = [{ id: 1, name: "张三" },{ id: 2, name: "李四" },{ id: 3, name: "王五" },
];
const server = htpp.createServer((req, res) => {const parsedUrl = url.parse(req.url);const queryParams = querystring.parse(parsedUrl.query);console.log(req.url, queryParams);if (req.url.split("?")[0] === "/api/getUserList") {res.end(`${queryParams.callback}(${JSON.stringify(userList)})`);} else {res.end("404 Not Found");}}).listen(8080);

在这里插入图片描述
在这里插入图片描述

5. JSONP优缺点

优点

  1. 相对简单:容易实现
  2. 兼容性好:由于JSONP依赖于script标签,它可以在老旧的浏览器中工作,不需要现代浏览器支持的高级功能或API。

缺点

  1. 只支持get 请求
  2. 安全性不好

可以使用其他的跨域方案,并不一定非得使用JSONP

参考链接

  • createDocumentFragment MDN

http://www.ppmy.cn/server/150004.html

相关文章

React18 +ts 路由写法

命令&#xff1a;npm i react-router-dom 版本声明&#xff1a; 写法一&#xff1a; src>router>index.tsx import App from "../App"; import React, { lazy } from "react"; import { BrowserRouter, Routes, Route, Navigate } from "react…

SCAU期末笔记 - Linux系统应用与开发教程课后习题

时间紧迫&#xff0c;只过一遍课后习题 第1章 Linux概述 1.Linux有哪些特点&#xff1f; 开放性、多用户、多任务、良好的用户界面、设备独立性、完善的网络功能、可靠的系统安全、良好的可移植性。 2.Linux和UNIX是什么关系&#xff1f; Linux是一个类UNIX内核的可自由发…

iPhone批量删除照片的方法

对于每一个iPhone用户来说&#xff0c;照片管理是一项日常而重要的任务。随着时间的积累&#xff0c;无数的照片快速填满了我们的存储空间&#xff0c;从美丽的风景到重要的家庭聚会&#xff0c;每一张照片都记录着我们生活中的瞬间。然而&#xff0c;当存储空间即将耗尽时&…

【vue2】文本自动省略组件,支持单行和多行省略,超出显示tooltip

代码见文末 vue3实现 最开始就用的vue3实现&#xff0c;如下 Vue3实现方式 vue2开发和使用文档 组件功能 TooltipText 是一个文字展示组件&#xff0c;具有以下功能&#xff1a; 文本显示&#xff1a;支持单行和多行文本显示。自动判断溢出&#xff1a;判断文本是否溢出…

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧 一、params 传参 restful风格的请求 二、Body中的form-data 传参三、Body中的raw的json格式 传参 一、params 传参 参数是会拼接到url后面的请求 场景规范&#xff1a;url后面的key值<3个参数的时候&#xff0c…

深入探讨Python正则表达式

则表达式&#xff08;Regular Expressions&#xff0c;简称 regex 或 regexp&#xff09;是一种强大的文本处理工具&#xff0c;可以用于搜索、匹配、替换、分割等操作。Python 的 re 模块提供了丰富的正则表达式功能。 一、正则表达式的基础知识 正则表达式是一种模式匹配工具…

VLA模型

目录 引言1. 机器人大模型面临的挑战2. 目前的数据集2.1 RT-12.2 Open X-Embedding2.3 DROID 3. 目前的VLA模型3.1 Goat3.2 RT-13.2.1 总体架构3.2.2 效果 3.3 RT-23.3.1 总体架构3.3.2 效果 3.4 RT-X3.4.1 模型效果1). RT-1-X2). RT-2-X 3.5 RT-H3.5.1 总体架构3.5.2 效果 3.6…

【机器人】控制之稳定性判定: 李雅普诺夫Lyapunov (4) 李函数设计再举例

图中的动力学方程和 Lyapunov 函数构造方式是基于能量的物理意义&#xff0c;以及该系统的特性推导出来的。以下详细解释为什么可以用图中的 Lyapunov 函数 VV 来描述该动力学方程的特性。 1. 动力学方程的意义 2. Lyapunov 函数的物理意义 3. 为什么可以用这个 Lyapunov 函数表…