1. 定义

在HTML 中, script 标签有两个个性质:

  1. script 标签可以不受同源策略的限制去访问服务器资源, 即script 标签不存在跨域问题
  2. script 加载的内容为JavaScript 代码时, 会立即执行一遍JavaScript 代码

我们利用这一性质从服务器中访问资源的方法叫做 JSONP

2. JSONP 解决跨域

express(app.js)

const express = require('express')

const log = console.log.bind(console)

const app = express()

app.get('/api/getuserinfo/jsonp', (request, response) => {

    let query = request.query

    let callback = query.callback

    let name = 'oulae'

    // 获取数据, 通过 jsonp 的方式传给前端

    let s = `${callback}('${name}')`

    response.send(s)

})

const main = () => {

    let server = app.listen(2300, () => {

        let host = server.address().address

        let port = server.address().port

        log(`应用实例，访问地址为 http://${host}:${port}`)

    })

}

if (require.main === module) {

    main()

}

html(crossOriginDemo.html)

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>跨域demo</title>

    <style type="text/css">

        .ajaxButton {

            width: 100px;

            height: 50px;

            background: blue;

            color: #fff;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .userMoudle {

            width: 300px;

            display: flex;

            justify-content: flex-start;

            align-items: center;

        }

        .name {

            width: auto;

        }

    </style>

</head>

<body>

    <div class="userMoudle">

        <div class="name">用户姓名:</div>

        <div class="nameInfo"></div>

    </div>

    <script>

        const changeInfo = (name) => {

            let ele = document.querySelector('.nameInfo')

            ele.innerHTML = name

        }

    </script>

    <script src="http://localhost:2300/api/getuserinfo/jsonp?callback=changeInfo"></script>

</body>

</html>

执行结果

打开HTML页面之后, 我们能看到页面执行了 changeInfo 函数, 并且参数是后端给定的, script 标签加载完成之后, 页面的内容也变更了.

3. 应用场景

这种方案最常见的应用场景就是加载JavaScript 库文件或JavaScript 操作文件

4. 代码演示

  1. github 地址:https://github.com/ouleWorld/studyDemo/tree/master/codeDevelopDemo/crossOrigin
  2. 拉取整个项目, 然后将expressDemo/app.js 替换为上述app.js 文件; crossOriginDemo.html替换为上述crossOriginDemo.html文件
  3. 运行expressDemo 后端模块
  4. 运行crossOriginDemo.html 文件

跨域解决方案 - JSONP的更多相关文章

  1. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  2. jquery跨域解决方案JSONP

    1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...

  3. 彻底理解跨域解决方案JSONP

    什么是同源策略? 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页 ...

  4. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  5. 第十四节：Asp.Net Core 中的跨域解决方案（Cors、jsonp改造、chrome配置）

    一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...

  6. cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案

    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...

  7. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  8. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  9. JSON跨域解决方案收集

    最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...

随机推荐

  1. 李婷华 201771010113 《面向对象程序设计（java）》 第二周学习总结

    第一部分:理论知识学习部分 第三章 java的基本程序设计结构 本章主要学习数据类型.变量.运算符.类型转换.字符串.输入输出.控制流程.大数值.数组等内容. 1.基本知识 (1)标识符:由字母.下划 ...

  2. LeetCode--Array--Container With Most Water (Medium)

    11. Container With Most Water (Medium)# Given n non-negative integers a1, a2, ..., an , where each r ...

  3. Blazor入门：ASP.NET Core Razor 组件

    目录 关于组件 组件类 静态资产 路由与路由参数 组件参数 请勿创建会写入其自己的组参数属性的组件 子内容 属性展开 任意参数 捕获对组件的引用 在外部调用组件方法以更新状态 使用 @ 键控制是否保留 ...

  4. 如何快速理解Spring中的DI和AOP

    前言 Spring框架通过POJO最小侵入性编程.DI.AOP.模板代码手段来简化了Java 开发,简化了企业应用的开发.POJO和模板代码相对来说好理解,本篇重点解读下DI和AOP. 一 DI DI ...

  5. R语言：日薪和应发工资

    生产部门普通员工为日薪,有时要知道日薪和应发工资的转换关系.做表一为日薪取整数,白天工资+晚上工资=应发工资,延长工作时间取时薪的1.5倍,应发工资保留到十位.做表二为应发工资取十的倍数,推算相应日薪 ...

  6. LeetCode最长回文子串

    题目: 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: "bab"注意: & ...

  7. java 实现mongoDB 增加，删除，修改，查看,多条件查询，聚合查询，分组查询(史上最全)

    首先idea创建一手springboot项目 引入如下依赖 <dependency> <groupId>org.mongodb</groupId> <arti ...

  8. Ubuntu 18.04使用OpenSSL自签证书（证书支持多IP及多域名，谷歌浏览器无警告）

    前言 在HTTPS数据传输的过程中,需要用SSL/TLS对数据进行加密和解密,以保证网络传输过程中数据的机密性.HTTPS协议可以大致分为两个部分:其一是协商密钥,首先当Client向Web Serv ...

  9. 题解 洛谷P1562 【还是N皇后】

    原题:洛谷P1562 这个题的原理和8皇后的原理是一模一样的,就是必须要用n个皇后把每一个行填满,同时满足每一列,每一行,每一条对角线只有一个棋子.但如果按照原来的方法暴打的话只有60分(优化亲测无效 ...

  10. HttpRequestUtils post get请求

    package com.nextjoy.projects.usercenter.util.http; /** * Created by Administrator on 2016/10/20. */ ...