正文

ajax解决跨域--jsonp原理(代码片段)

Z&&Y  Z&&Y  2022-12-12  701

关键词：

1.解决跨域–JSONP

1.1 JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。

1.2 JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。

<!-- 我们在script中可以引入第三方库, 说明script标签是支持跨域的 -->
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

1.3 JSONP 的使用

项目的文件结构:

app.js

const data =
    name: "YanFang"


console.log(data);

ajaxDemo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理演示</title>
    <style>
        #result 
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        
    </style>
</head>

<body>
    <div id="result"></div>

</body>
<script src="./js/app.js"></script>

</html>

我们使用Open with Live Server来打开

使用这个URL来替换 ./js/app.js

发现现在也是可以访问app.js的

我们现在想要把app.js的name值放在网页当中

app.js

const data =
    name: "YanFang"
;

handle = (data)=>
   document.getElementById('result').innerText=data.name


handle(data);

我们现在把handle()函数放在HTML文件里面，app.js只负责调用函数

ajaxDemo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理演示</title>
    <style>
        #result 
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        handle = (data) => 
            document.getElementById('result').innerText = data.name
        
    </script>
    <script src="http://127.0.0.1:5500/ajax/js/app.js"></script>
</body>

</html>

app.js

const data =
    name: "YanFang"
;

handle(data);

安装express

npm i express

server.js

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();
 
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装

//jsonp服务
app.all('/jsonp-server',(request, response) => 
    // response.send('console.log("hello jsonp")');
    const data = 
        name: '🐟🐟🐟'
    ;
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.send(`handle($str)`);
);

//4. 监听端口启动服务
app.listen(8080, () => 
    console.log("服务已经启动, 8080 端口监听中....");
);

启动服务 nodemon server.js

ajaxDemo.html

现在的运行结果：

解决ajax跨域问题-jsonp原理解析

解决Ajax跨域问题-JSONP原理解析为什么会有跨域问题？-因为有同源策略同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议,域名和端口都相同，只要其中之一不相同就是跨域同源策略主要为了保证浏览器的安... 查看详情

ajax解决跨域--jquery发送jsonp请求(代码片段)

1.jQuery发送jsonp请求需求在"点击发送jsonp请求"后，将服务器返回的响应体渲染到窗口中。ajaxDemo.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname= 查看详情

ajax解决跨域--原生jsonp实践(代码片段)

1.原生jsonp实践需求：验证用户名是否存在，如果用户名不存在，则在失去焦点的时候边框变红。ajaxDemo.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname 查看详情

flask解决跨域(代码片段)

Flask解决跨域问题：网页上（client）有一个ajax请求，Flasksever是直接返回jsonify。然后ajax就报错：No‘Access-Control-Allow-Origin‘headerispresentontherequested 原因：ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方... 查看详情

解决跨域的方式（9种）(代码片段)

...跨域请求）3)JSONP优缺点JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。4)JSONP的实现流程声明一个回调函数，其函数名(如show)当做参数值，要... 查看详情

jsonp原理详解(代码片段)

...的：1、一个众所周知的问题，ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态页面、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现，web页面上调用js文件时则不受跨域的影响（不仅如... 查看详情

jsonp原理及其简单封装(代码片段)

...JSONP1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不... 查看详情

前端跨域问题解决方案(代码片段)

...orage和IndexDB无法读取DOM和JS对象无法获取Ajax请求不能发送解决方案：方案一：JSONP原理：通过script标签引入的js不受同源策略的限制，而XmlHttpRequest对象受到同源策略的影响。可以加载跨域服务器上的脚本，用JSONP获取的不是JSON数... 查看详情

jsonp原理及实现(代码片段)

...请求。它的原理是利用script标签的src属性没有跨域限制来解决跨域。通过前端将回调函数传递到服务器端（将回调函数的名称放到这个请查看详情

如何解决跨域问题(代码片段)

解决跨域三种方法什么是跨域，为什么要解决跨域。根据浏览器的同源策略。当浏览器不能响应执行网站的脚本时候，首先想到第一个问题点是否存在跨域问题。就是所谓同源策略，何为同源就我们经常上网是通过网址访问网站... 查看详情

跨域问题(代码片段)

...跨域，像是一般的href属性，a标签什么的都不拦截。二、解决跨域问题的两种方式JSONPCORS 三、JSONP先简单来说一下JSONP，具体详细详见上面JSONPJSONP是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。... 查看详情

jsonp解决跨域问题(代码片段)

一、什么是同源概念：如果两个页面的协议、域名和端口都相同，则这两个页面具有相同的源。二、什么是同源策略概念：是浏览器提供的一个安全功能。三、什么是跨域概念：同源指的是两个URL的协议、域名... 查看详情

常见跨域方法原理及其用例(代码片段)

一、常见跨域方法1）JSONP跨域需要目标服务器配合一个callback函数2）AJAX跨域CORS3）使用window.name+iframe来进行跨域4）window.postMessage:跨文档通信API（Cross-documentmessaging）5）跨子域:修改document.domain6）通过Nginx反向代理7）WebSocket ... 查看详情

跨域请求的方式即实现(代码片段)

跨域请求的三种方式解决方法前后端配合;jsonp;CORS–跨域资源共享Php服务器代理跨域请求的方式即实现浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域当发送方地址和接受放地... 查看详情

cors跨域解决方案(代码片段)

...跨域一般是由AJAX请求引发的问题，http请求不受此影响。解决跨域问题较多的使用CORS方案，JSONP逐渐被淘汰，因为JSONP只支持GET请求。CORS解决跨域： <requestFiltering> <verbs>&nbs 查看详情

vue--jsonp的诞生原理及应用实例

...务器中，这样的话，就无法通过Ajax访问到这个数据了。解决：想要实现这种跨域资源请求，有很多解决办法，列举出一部分：让查看详情

前端面试--ajax和jsonp跨域(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metanam 查看详情

说说json和jsonp，浅析jsonp解决ajax跨域问题

...是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。但到目前为止最被推崇或者说首选的方案... 查看详情