精华内容
下载资源
问答
  • jsonp解决跨域问题
    2021-10-11 18:33:09

    JSONP的概念和特点、

    概念:

    jsonp的概念:浏览器通过 <script> 标签的 src 属性,请求服务器上的数据,同时,服务器以函数调用的方式返回。这种请求数据的方式叫做 jsonp

    特点:

    • JSONP 不属于真正的 Ajax 请求,因为它没有使用 XMLHttpRequest 这个对象】
    • JSONP 仅支持 GET 请求 , 不支持 POST、PUT、DELETE 等请求

    创建 JSONP 接口的注意事项

    如果项目中已经配置了 CORS 跨域资源共享,为了防止冲突,必须在配置 CORS 中间件之前声明 JSONP 的接口  否则 JSONP 接口会被处理成开启了 CORS 的接口

    // 导入 express 模块
    const express = require('express')
    
    // 创建 express 的服务器实例
    const app = express()
    
    // 配置解析表单数据的中间件
    app.use(express.urlencoded({ extended: false }))
    
    // 必须在配置 cors 中间件之前,配置 JSONP 的接口
    app.get('/api/jsonp', (req, res) => {
      // 定义 JSONP 接口具体的实现过程
    })
    
    // 导入中间件
    const cors = require('cors')
    app.use(cors())
    
    // 导入路由模块
    const router = require('./020-apiRouter')
    // 把路由模块,注册到 app 上
    app.use('/api', router)
    
    // 调用 app.listen 方法,指定端口号并启动 web 服务器
    app.listen(3000, () => {
      console.log('running……')
    })

    实现 JSONP 接口的步骤

    实现步骤

    1. 获取客户端发送过来的回调函数的名字

    2. 得到要通过 JSONP 形式发送给客户端的数据

    3. 根据前两步得到的数据,拼接出一个函数调用的字符串

    4. 把上一步拼接得到的字符串,响应给客户端的 <script> 标签进行解析执行

    更多相关内容
  • jsonp解决跨域问题

    千次阅读 2021-01-29 22:49:25
    JSONP解决跨域问题一级目录二级目录三级目录1. jsonp方案 一级目录 二级目录 三级目录 1. jsonp方案 jsonp实现跨域请求的原理: 动态创建在这里插入代码片


    最近在学习ajax跨域的问题,为了加深理解,写篇博客记录一下。

    1. 原理分析

    1.1 同源策略

    我们先来看看跨域问题涉及的一些概念:

    • 源: 指页面中数据的来源,由三部分指定:协议名、域名或IP地址、端口号
    • 同源策略:不同源的客户端js脚本在没有明确授权的情况下,不能读写对方资源(a.com下的js脚本采用ajax不能读取b.com里面的文件数据,会发生跨域错误)
    • 跨域错误:(如下图)
      在这里插入图片描述

    1.2 跨域的情形

    在这里插入图片描述
    上图中有“红色标记”的栗子都是不同源的情形。总的来说,协议名、域名、端口号任意一项不同就不同源。

    1.3 跨域问题的解决方案

    • 很多项目中,为了实现前后端分离,会特意将前端静态资源(html/css/js等)与后台数据接口 分处在不同的服务器上,所以域名/ip或端口号必然不相同,这就导致了“跨域请求问题”。
    • 跨域问题的解决方案有:
      – 代理请求
      –JSONP
      –CORS

    本文主要将jsonp方案解决跨域问题,其他方案学习透彻了再来总结。

    1.4 什么是JSONP

    • JSONP(json with padding)是json的一种使用模式。
    • 通过上面的学习,我们已经知道,由于同源策略浏览器会禁止JS跨域。
      但是,我们知道script标签是允许跨域请求的。利用这个特性,客户端使用script代替XHR( XMLHttpRequest)发起跨域请求,服务器在json响应数据前后填充一些额外的内容,就称为“填充式JSON”——JSONP

    2. JSONP方案具体实现

    JSONP实现跨域请求的原理就是动态创建script标签,利用“src”不受同源策略约束的性质来实现跨域获取数据。
    菜鸟教程提供了一个链接,我们可以用它练练手~
    链接:https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

    2.1动态创建script标签

    下面栗子很简单,就不细说了~

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
    </head>
    <body>
    <script>
      function callbackFunction(data){
        console.log("i got it");
        console.log(data);
      }
    </script>
    <script>
      window.onload=function(){
        var script=document.createElement("script");
        script.src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction";
        document.head.append(script)}
    </script>
    </body>
    </html>
    

    2.2 用jQuery中$.getJSON()实现JSONP

    • $.getJSON()方法允许通过使用JSONP形式的回调函数来加载其他网域的JSON数据
    • 使用$.getJSON()方法实现跨域请求,需要在请求路径URL后增加callback=?, jQuery将自动替换“?”为正确的函数名,以执行回调函数。

    注:下面代码中路径后是jsoncallback=?,因为服务端的代码中回调函数名为jsoncallback,前后端应该是一致的

    记得引入jQuery文件!

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
        <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
    </head>
    <body>
    <script>
    $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(data){console.log(data);})
    </script>
    </body>
    </html>
    

    2.3 用jQuery中$.ajax()实现JSONP

    $.ajax()方法同样可以实现JSONP跨域请求,我们主要来看看它的一些选项参数:

    • url:请求地址
    • type:请求方式
    • dataType:“jsonp” 必写,设置服务器端返回的数据类型,这里是"jsonp"
    • jsonp:获得jsonp回调函数名的参数名,这个值用于代替"callback=?"(本例就是用"jsoncallback=?“代替了"callback=?”),一般默认都是callback
    • jsonCallback:可选,为JSONP请求指定一个回调函数名,这个值将代替jQuery自动生成的随机函数名(就是代替"callback=?"中的问号)
    • success:请求成功后的回调函数。

    知道这些选项参数的意思了,我们再看看上面给到的那个链接:

    https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

    我们看到调用的url中,jsoncallback参数告诉服务器,我的本地回调函数叫做callbackFunction,让服务器请把查询结果传入这个函数中。服务器传递给callbackFunction函数json格式的数据:callbackFunction([“customername1”,“customername2”])

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JSONP 实例</title>
        <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
    </head>
    <body>
    <script>
    $.ajax({
      url: "https://www.runoob.com/try/ajax/jsonp.php",
      type: "get",
      dataType: "jsonp",
      jsonp: "jsoncallback",
      success: function(data){
        console.log(data);
      }
    })
    </script>
    </body>
    </html>
    

    2.4 总结:

    • ajax和jsonp本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
    • JSONP方案属于客户端直接请求,不存在二次请求的问题;但是,不足是script标签只能发起get请求。
    展开全文
  • 使用jsonp解决跨域问题

    千次阅读 2021-04-23 15:59:03
    Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据...

    什么是跨域:

    1、域名不同时。
    2、域名相同,端口不同。

    只有域名相同、端口相同时,才可以访问。

    可以使用jsonp解决跨域问题。

    什么是jsonp?

    Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

    标题jsonp的 原理

    浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据。
    在这里插入图片描述

    展开全文
  • jsonp解决跨域问题(简单易懂)

    千次阅读 2020-08-11 16:29:16
    解决问题之前,我们首先要明白一个问题,什么是跨域?为什么会出现跨域? 其实跨域的出现主要是因为浏览器的同源策略导致的,那什么又是浏览器的同源策略呢。浏览器的同源策略主要是为了保证用户信息的安全而出现。...

    在日常的项目开发中,前端和后台是要经常交互的,有时候前端去请求后端的接口时,会出现跨域这个问题,解决跨域的方法有很多,本文主要讲解下如何使用jsonp来解决跨域问题。

    解决问题之前,我们首先要明白一个问题,什么是跨域?为什么会出现跨域?

    其实跨域的出现主要是因为浏览器的同源策略导致的,那什么又是浏览器的同源策略呢。浏览器的同源策略主要是为了保证用户信息的安全而出现。那什么情况下属于同源,什么情况下是不同源呢,看下图

    看到上面图片上的解释之后,我相信很多人对同源应该已经明白了吧。

    其实jsonp解决跨域问题的本质就是利用script标签的src属性来进行,由于script标签的src属性不受跨域的现在,所以我们可以将我们要请求的服务器的地址及相关参数作为src的值来进行传输,然后再由后台进行配合就可以实现跨域。

    步骤如下:

    a 将不同源的服务器端请求地址写在script标签的src属性中

    b 服务器端响应的必须是一个函数的调用,真正要发送给客户端的数据要作为函数调用的参数

    c 在客户端全局作用域下定义函数fn

    d 在fn函数内部对服务器返回的数据进行处理

    1 最简单的jsonp实例

    比如现在我们的服务器地址端口号为3001

    var express = require('express');
    var path = require('path');
    var app = express();
    
    app.use(express.static(path.join(__dirname, 'public')));
    
    //路由配置
    app.get("/test",(req,res)=>{
      const result = 'fn()'
      res.send(result)
    })
    
    app.use(function(req, res, next) {
      next(createError(404));
    });
    
    app.listen(3001)
    module.exports = app;
    

    我们在页面中请求的地址为/test,如果我们要使用jsonp解决的话前端代码可以这么写

    <body>
        <script>
            function fn(){
                console.log("ok函数调用了")
            }
        </script>
        <script src="http://localhost:3001/test"></script>
    </body>

    需要注意的是,我们要先在全局声明一个fn的全局函数,作为后端返回给我们函数的调用,如果这个函数不是全局的话,我们在调用的时候会报错,而且这个一定要在前面。

    2 通过触发事件来进行jsonp跨域 比如页面中有个按钮,现在需要点击按钮 发送跨域请求 实现代码如下

    此种场景的关键点是 动态创建script标签,然后设置src属性即可

    <body>
    
        <button id="btn">点击发送请求</button>
    
        <script>
            function fn() {
                console.log("ok函数调用了")
            }
    
            var btn = document.getElementById("btn");
            
            btn.onclick = function () {
    
                var script = document.createElement("script");
    
                script.src = 'http://localhost:3001/test';
    
                document.body.appendChild(script);
    
                script.onload = function () {
                    document.body.removeChild(script)
                }
    
            }
        </script>
        <!-- <script src="http://localhost:3001/test"></script> -->
    
    </body>

    3 客户端需要将函数名称传递到服务器 可以如下实现:

    前端代码

    <body>
        <script>
            function fn(data) {
                console.log("客户端的函数调用了")
                console.log(data)
            }
            
        </script>
        <script src="http://localhost:3001/test?callback=fn"></script>
    </body>

    服务器端代码

    //路由配置
    app.get("/test",(req,res)=>{
      var fnName = req.query.callback;
      var result = fnName + '({name:"zhangsan"})';
      res.send(result);
    })

    页面输出

    以上就是前端利用jsonp实现跨域的方法,需要注意的是利用该方法实现是需要前端和后端配合的。

    展开全文
  • 心知天气api直接使用会出现跨域,查阅心知天气api文档后发现它支持jsonp,故可使用该方法。 jsonp是一种跨域通信的手段,只支持get方法,而且需要后端代码的配合, 心知天气获取签名 心知天气规定JSONP 方式调用...
  • Jsonp解决跨域问题

    2022-05-09 10:55:37
    原理:有些标签天生具有跨域能力,比如:img,link,iframe,script,Jsonp就是利用script的跨域能力来发送请求的,服务器端返回的是一个回调函数,由于jsonp只能请求资源文件,所以Jsonp只能发送get请求. ...
  • 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import。 1.新建jsonp.js文件来封装原始jsonp插件 // 引入...
  • JavaScript jsonp解决跨域问题

    千次阅读 2018-08-03 17:55:30
    产生跨域原因[浏览器同源策略]:协议不同(http/https)、域名不同、端口不同 演示下出现跨域的情况,请求豆瓣api:http://api.douban.com/v2/movie/top250 jquery-ajax请求 function req_test () { var url = ...
  • 解决跨域问题的方法有很多种,例如CORS(cross orign resources share)和JSONP。这里我就着重介绍一下jsonp解决方案。 一:基础概念 同源策略:同一协议,同一域名,同一端口号。只要不满足三者其中一种都是属于...
  • 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:’JSONP’。 代码如下: $.ajax({  url: “http://…….”,  type: ‘GET’,  dataType: ‘JSONP’,//here  success:...
  • Jsonp解决跨域

    2021-05-25 18:55:15
    查阅网上解决跨域的方式,主要有以下几种 1、使用jsonp方式 jsonp的原理就是利用<script>标签没有跨域限制,通过<script>标签src属性,发送带有callback参数的GET请求,服务端将接口返回数据拼凑到...
  • 安装jsonp npm install vue-jsonp --save main.js中引入 import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 组件中基本用法 this.$jsonp('/company/Info',{id:233,name:'zhangsan'}).then(json =...
  • 使用JSONP解决跨域

    千次阅读 2022-05-16 20:02:13
    1.首先需要知道什么是跨域 浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 出于浏览器的同源策略限制 同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本...
  • Ajax使用jsonp解决跨域问题
  • 由于浏览器客户端有同源策略,所以随之出现的就是浏览器请求跨域问题,这个问题其实是这样的: 假设我们使用Ajax向不同域的服务器发送一个请求,其实在服务器端不会有任何问题,只是服务端响应数据返回给浏览器的...
  • 使用JSONP解决跨域(JS中、Jquery里边的Ajax)
  • JSONP解决前端跨域问题

    千次阅读 2021-10-17 15:53:05
    一:跨域问题 广义的跨域:指一个域下的文档或脚本试图去请求另一个域下的资源。 1.) 资源跳转: a链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、 <frame>等dom标签, ...
  • 关于Jsonp解决跨域

    2022-03-17 18:27:45
    jsonP解决跨域问题
  • 前言: 其实跨域的出现主要是因为浏览器的同源策略导致的,那什么又是浏览器的同源策略呢???。 同源策略 概念:协议,域名,接口 3者相同就是同源, ...解决方案---JSONP JSONP是JSON with Pad...
  • 主要介绍了springboot+jsonp解决前端跨域问题小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 使用jQuery jsonp解决跨域(案例展示)
  • jsonp解决跨域

    2022-02-28 13:25:05
    理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域 跨域就是指浏览器不允许当前页面的所在源,去请求另一个源的数据 在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的,通过在dev...
  • 基本原理 浏览器端: 动态生成<script>来请求后台提供数据的接口 然后定义好用于接收响应数据的函数(fn), 并将函数名通过请求参数提交给后台(如 callback=fn) ... 接收到请求处理产生结果数据后, ...
  • 1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,887
精华内容 21,154
关键字:

jsonp解决跨域问题