前端
同源策略并不会拦截静态资源请求，那么就将接口伪装成资源，然后后端配合返回一个前端预定义的方法调用，将返回值放入调用该函数的形参即可

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        //前端预定义

        function getName(rep){

            document.write(rep.name)

            console.log(rep)

        }

    </script>

</head>

<body>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="http://localhost:8082?callback=getName"></script>

</body>

</html>

后端
后端以node为例，其他语言大同小异

var http = require("http");

const url = require("url");

http.createServer(function (request, response) {

    let params = url.parse(request.url,true);

    // 返回一段（js）代码【本质是字符串类型】，填充到html中那个script标签的src中。

    response.end(params.query.callback + `(${JSON.stringify({name:"abc"})})`);

}).listen(8082);

效果

补充
当然了，如果你觉得麻烦，你可以用jq的jsonp或者其他封装ajax支持jsonp的插件，效果一样

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>

        let url='http://localhost:8082?callback=getName';

        $.ajax({

            url: url,

            type: "get",

            dataType: "jsonp",

            jsonpCallback: "getName",

            success: function (rep) {

                document.write(rep.name)

                console.log(rep)

            }

        })

    </script>

</head>

<body></body>

</html>

跨域问题-jsonp的更多相关文章

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

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

  2. 浏览器同源策略，跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  3. 跨域Ajax -- jsonp和cors

    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...

  4. jquery跨域解决方案JSONP

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

  5. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  6. JS跨域：jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  7. 【记录】ajax跨域问题jsonp正确的使用方式

    最近遇到ajax请求跨域问题,解决方案用jsonp,现记录如下: //跨域请求jsonp封装 function doJsonPostCallBack(type, url, data,async, ca ...

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

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

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

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

  10. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

随机推荐

  1. c#并行扫描端口控制台程序

    static void Main(string[] args) { Console.WriteLine("请输入ip"); string ip = Console.ReadLine ...

  2. 用iis虚拟目录和windows共享目录上传文件到远程

    现在有这样一个需求,有主机A和主机B.主机A上发布了一个网站,现在往主机A上上传文件默认是存在主机A上的, 如何把文件传到主机B上呢? 第一步在主机A和主机B上都创建同一个帐号admin,密码admi ...

  3. Hibernate_day02--课程安排_主键生成策略_对实体类crud操作_实体类对象状态

    Hibernate_day02 上节内容 今天内容 实体类编写规则 Hibernate主键生成策略 实体类操作 对实体类crud操作 添加操作 根据id查询 修改操作 删除操作 实体类对象状态(概念) ...

  4. 编程之美 set 16 拈游戏分析(1)

    题目 N 个石头排成一行, 每块石头有固定的位置和编号, 两个玩家依次取石头, 每个玩家可以取其中的任一块石头, 或者相邻的两个石头. 石头在游戏过程中不能移位, 最后将剩下的石头依次取光的玩家获胜 ...

  5. 编程之美 set 5 寻找数组中最大值和最小值

    解法 1. 设置 min, max 两个变量, 然后遍历一遍数组, 比较次数为 2*N 2. 依然设置 min, max 两个变量并遍历数组, 但将遍历的 step 设置为 2, 比较次数为 1.5 ...

  6. Makefile foreach（转）

    原文出处:http://blog.csdn.net/cjsycyl/article/details/8064871 foreach 函数和别的函数非常的不一样.因为这个函数是用来做循环用的,Makef ...

  7. vue+webpack2实现路由的懒加载

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...

  8. IOS7开发～新UI学起（二）

    本文转载至 http://blog.csdn.net/lizhongfu2013/article/details/9133281 1.UINavigationBar: NSDictionary* at ...

  9. 三 Android Studio打包EgretApp (SDK选择和下载)

    一 设置项目的sdk路径 二 设置项目使用sdk版本 一 设置项目的sdk路径 设置SDK目录 选择你电脑上的sdk路径 二 在项目中设置SDK版本 在项目中设置编译的sdk版本 在SDK Manag ...

  10. WCF：并发处理

    当多个线程同时访问相同的资源的时候就会产生并发,WCF缺省情况下会保护并发访问.对并发访问需要恰当处理,控制不好不仅会大大降低WCF服务的吞吐量和性能,而且还有可能会导致WCF服务的死锁.一.WCF并 ...