精华内容
下载资源
问答
  • 原生js实现jsonp跨域 jquery 实现jsonp跨域 vue实现http跨域请求 在不同域名下请求数据就会产生跨域问题 同源:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题 ajax的同源策略...

    原生js实现jsonp跨域 jquery 实现jsonp跨域 vue实现http跨域请求

    在不同域名下请求数据就会产生跨域问题
    同源:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题

    ajax的同源策略就是为了安全起见,不允许在不同域名下请求数据

    原生js实jsonp跨域
    我的是在本地起来的服务器 可以用phpstudy或者用wampserver64来起服务 然后把文件放到www目录下面,进入www目录打开文件 从服务器里面打开文件

    <script>
        //提供jsonp服务的url地址 (不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
        var url = "http://localhost:80/test/jsonp.php";  //  这个路径不是在本地直接打开的文件路径(不能放到服务器里面,也就是www目录下面)
        var callback = function(data) {
            console.log("请求返回的数据",data);
        }
    
        //这里封装了一个函数 可以多次调用
        /*
            url参数就是请求的地址
            callback是我们获取返回数据的回到函数 
        */
        function ajaxJSONP(url,callback){
            var script = document.createElement("script")
            script.setAttribute("src",url+"?callback="+callback)
            console.log(script)
            document.getElementsByTagName("body")[0].appendChild(script);
        }
        //
        ajaxJSONP(url,callback);
    </script>
    

    jquery实现跨域请求

    jQuery(document).ready(function(){
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://localhost/jsonp.php?wen=howoldareyou",
                 dataType: "jsonp",
                 //主要就是下面这两行代码     
                 jsonpCallback:"callback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
    //           jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)     前后端设置的请求名字 一般默认为callback
                 success: function(data){
                      alert('返回来的数据显示:' + data);
                 },
                 error: function(){
                     alert('fail');
                 }
             });
         });
    

    vue实现跨域请求
    3.0版本没有config文件需要在src下新建vue.config.js文件 2.0是在config文件夹中的index.js中配置
    就是配置vue.config.vue文件

    module.exports = {
    
    
        // 所有 webpack-dev-server 的选项都支持。
        devServer: {
            host: "localhost",
            port: 8080, // 端口号
            https: false,
            open: true, //配置自动启动浏览器
    
            // 配置多个代理
            proxy: {
                "/api": {
                //比如我的请求链接为xxxx.com/aaa/?token=1e1245335435435463564354324520f;
                    target: "xxxx.com", // 本地模拟数据服务器  跨域的域名
                    changeOrigin: true,
                    pathRewrite: {
                        "^/api": "" // 去掉接口地址中的api字符串
                    }
                }
            }
        }
    };
    在axios请求的路径中就可以直接写一下代码
    
    
    
    
    

    在这里插入代码片

    axios.get("/api/aaa/?token=1e1245335435435463564354324520f").then((res)=>{
    console.log(res)})
    
    展开全文
  • 原生ajax库,实现jsonp跨域,短小精悍。
  • 主要介绍了SpringBoot实现jsonp跨域通信的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 原生js实现jsonp跨域 注意jsonp跨域需要后台支持。 实现效果 这里是用的必应每日壁纸api 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&...

    原生js实现jsonp跨域

    注意jsonp跨域需要后台支持。

    实现效果

    这里是用的必应每日壁纸api
    在这里插入图片描述
    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <button onclick="pre()" >上一张</button>
      <button onclick="next()" >下一张</button>
      <img id="img"  src="" alt="">
    <script>
      let a = 0
      create(a);
      function pre(){
        a = a + 1;
        create(a)
      }
      function next(){
        if(a === 0){
          return false;
        }else{
          a = a - 1;
          create(a)
        }
      }
    
      function create(d){
        let script = document.createElement('script');
        script.id = 'getBiyingJsonp'
        script.src = `https://bing.ioliu.cn/v1/?d=${d}&w=1920&h=1080&callback=callback`
        document.body.insertBefore(script, document.body.firstChild);
      }
      
      function callback(e){
        document.getElementById('img').src = e.data.url;
        // 移除用于跨域的script
        document.getElementById('getBiyingJsonp').remove();
      }
    </script>
    </body>
    </html>
    

    vue中用 vue-jsonp实现跨域

    注意:你可能对this.$jsonp有些疑惑,因为没有看到他在哪里赋值给vue的原型,vue-jsonp内部已经实现了绑到原型的操作了。

    <template>
    	<div>
    		<img :src="src" alt="">
    	</div>
    </template>
    
    <script>
    //如果你在很多地方要用到jsonp可以把它放到main.js中
    	import Vue from 'vue'
    	import vueJsonp from 'vue-jsonp'
    	Vue.use(vueJsonp)
    	export default {
    		data() {
    			return {
    				src:''
    			}
    		},
    		created(){
    			this.getImg(0)
    		},
    		methods: {
    			getImg(d) {
    				let url = `https://bing.ioliu.cn/v1/`;
    				 this.$jsonp(url,{
    					params:{
    						d:d,
    						w:1920,
    						h:1080
    					}
    				}).then(res=>{
    					console.log(res)
    					this.src = res.data.url;
    				}).catch(err=>{
    					console.log(err)
    				})
    			}
    		},
    	}
    </script>
    
    展开全文
  • angular4 实现jsonp跨域请求

    千次阅读 2017-10-11 08:58:08
    angular4 实现jsonp跨域请求 前端解决跨域请求有多重解决方案,nginx 分发,代理,server response 请求允许,都可以实现跨域,jsonp显然已经过时,不过对于特定的场景还是有一定的开发需求,本文将介绍如何在...

    angular4 实现jsonp跨域请求

    前端解决跨域请求有多重解决方案,nginx 分发,代理,server response 请求允许,都可以实现跨域,jsonp显然已经过时,不过对于特定的场景还是有一定的开发需求,本文将介绍如何在angular4中实现跨域请求:

    • 新建服务
    ng g service netWork
    • 代码实现
    import {Injectable, OnInit} from '@angular/core';
    import {
      Headers, Http, JsonpModule, XHRBackend, RequestOptions, RequestOptionsArgs, Jsonp,
      JSONPBackend, URLSearchParams, QueryEncoder, ResponseContentType
    } from '@angular/http';
    import 'rxjs/Rx';
    import {Observable} from 'rxjs/Observable';
    
    
    
    @Injectable()
    export class NetWorkService {
    
    
      constructor( private jsonp: Jsonp) {
    
      }
    
    
      load(url: string, data?: Object, options?: RequestOptionsArgs): Observable<any> {
    
        const searchParams = new URLSearchParams();
          // 注意 一定要将jsonp 请求参数封装到 **URLSearchParams** 中,不然服务器虽然返回200 但是也会报jsonp 不是有效的callback错误,如下
        // "_body":"JSONP injected script did not invoke callback.",
        // "headers":  "Headers",
         //"status": 200,
         //"statusText": "Ok",
        //" type": 3,
    
        if (data) {
          for (const item in data) {
          // for in中添加if 判断,是一种语法规范,建议采用中这种方式
            if (data.hasOwnProperty(item)) {
              searchParams.append(item, data[item]);
            }
          }
        }
       //回调名称可以自己定义,但是回调参数一定要是‘JSONP_CALLBACK’
    searchParams.append('callback', 'JSONP_CALLBACK');
    
        if (typeof url === 'string') { 
          if (!options) {
            options = {headers: new Headers()};
          }
          options.headers.set('Content-Type', 'application/json:charset=UTF-8');
          options.responseType = ResponseContentType['1'];
          options.params = searchParams;
        }
        return this.jsonp.request(url, options)
          .map(res => res.json())
          .catch(this.catchAuthError(this));
    
      }
    //捕获请求失败,可以在这里捕获
      private catchAuthError(self: NetWorkService) {
        return (res: Response) => {
          if (res.status === 401 || res.status === 403) {
            console.log(res);
          }
          if (res.status === 500 || res.status === 501) {
            console.log(res);
          }
          return Observable.throw(res);
        };
    
      }
    }
    
    
    • 应用
      注入服务
    import {Component, OnInit, AfterViewInit} from '@angular/core';
    
    import {NetWorkService} from '../../services/net-work.service';
    import {ActivatedRoute, Router} from '@angular/router';
    
    import 'rxjs/Rx';
    import {Observable} from 'rxjs/Observable';
    
    
    @Component({
      selector: 'app-carousel',
      templateUrl: './carousel.component.html',
      styleUrls: ['./carousel.component.scss']
    })
    export class CarouselComponent implements OnInit,  {
    
    
      imgUrl: Observable<any>;
    
      constructor(
                  private netWork: NetWorkService) {
    
      }
    
      ngOnInit() {
            this.imgUrl = this.netWork.load('localhost/api',{
            id:1
            name:'隔壁老王'
    });
        this.imgUrl.subscribe(
          (res) => {
            console.log(res);
          },
          err => {
          },
          () => {
    
          });
      }
    }
    
    展开全文
  • 昨天在工作中第一次使用ajax的jsonp跨域请求数据,但是遇到了Uncaught SyntaxError: Unexpected identifier这个问题,上网查解释如下: 出现这种错误的情况之一确实是图中所说的,但是我这个出现的原因其实是后台...

    使用nodejs实现jsonp

    前言

    昨天在工作中第一次使用ajax的jsonp跨域请求数据,但是遇到了Uncaught SyntaxError: Unexpected identifier这个问题,上网查解释如下:
    在这里插入图片描述
    出现这种错误的情况之一确实是图中所说的,但是我这个出现的原因其实是后台返回的数据格式有问题,双括号里又套了一层双括号,导致前台解析的时候出了错。好了,问题解决了,但是心中还有一些疑问,jsonp到底是如何实现跨域的呢?

    jsonp实现跨域的流程

    废话少说,直接上代码解释:
    1、服务端代码jsonp.js

    let express=require('express')
    let app=express()
    app.get('/',(req,res)=>{
        let fn=req.query.callback  //fn='zl'
        let data=JSON.stringify({
            data:"hahaha"
        })
        res.end(fn+`(${data})`)
    })
    app.listen(80,()=>{
        console.log('serve is running...')
    })
    

    2、客户端请求:

    
    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../../node_modules/jquery/dist/jquery.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            function zl(res){
                console.log(res) //输出:{data:"hahaha"}
            }
        </script>
        <script src="http://localhost:80/?callback=zl"></script>
    </body>
    </html>
    

    执行过程如下:
    1、<script src="http://localhost:80/?callback=zl"></script>发送请求
    2、服务端收到请求let fn=req.query.callback此时fn的值就是’zl’
    3、服务端向客户端返回数据,经过字符串拼接,返回给客户端的其实是zl({data:“hahaha”})
    4、客户端收到服务端返回的内容:zl({data:“hahaha”})
    5、客户端将zl({data:“hahaha”})解析为调用了zl函数且入参为{data:“hahaha”},所以最终客户端打印了{data:“hahaha”}
    综上,其实jsonp的原理很简单,就是利用了script标签可以跨域请求这一特点,前端把方法作为参数传到服务端,然后服务端将数据作为方法的入参返回给前端,这样就能实现前后端通信。

    扩展

    使用ajax跨域:

    $.ajax({
        type: "GET",
        url: "http://localhost:80/",
        dataType: "jsonp",//  
        jsonp: "callback",//此参数的值与服务器端的req.query.callback对应
        success: function (data) {
            console.log(data)//输出:{data:"hahaha"}
        },
        error: function (err) {
            console.log(err)
            console.log('请求错误')
        }
    });
    
    展开全文
  • json和jsonp的区别和联系 springMVC实现jsonp跨域请求一、 概念理解1、 json:指的是 JavaScript 对象表示法(JavaScript Object Notation);JSON 是轻量级的文本数据交换格式 ; JSON 使用 Javascript语法来描述...
  • 实现jsonp跨域的方法

    2018-01-12 16:37:59
    自己手动写一个jsonp跨域的组件 上代码:  (function (window, document, undefined) { // 1、挂载回调函数 // 2、将data转换为字符串形式 // 3、处理url中的回调参数 // 4、创建一个script标签 // 5、...
  • import jsonp from "fetch-jsonp";
  • 所谓的jsonp跨域访问,其实就是利用了script标签来发送请求,返回的数据为javascript代理,在返回的javascript代码中调用已经写好的javascript方法,传入需要的参数进行处理即可。 下面是项目中用到的跨域访问代码:...
  • ajax实现JSONP跨域

    2017-06-22 14:37:19
    跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果 AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP实现JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,...
  • 通过script标签实现JSONP跨域调用

    千次阅读 2012-04-05 12:46:45
    为了演示通过script标签实现JSONP跨域调用,在VS的解决方案中有两个不同域的网站,客户端网站MyClientJSONP的域是localhost://24114,处理JSONP请求的服务器网站MyServerJSONP的域是localhost://24115,本示例就是...
  • Java实现Jsonp跨域原理简单介绍

    千次阅读 2019-05-07 17:03:16
    不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现跨域。 使用方式 请求...
  • 一、 Jsonp(JSON with Padding) 是 json 的一种&...二、jQuery的jsonp方式跨域请求 &amp;amp;amp;amp;lt;%@ page pageEncoding=&amp;amp;amp;quot;utf-8&amp;amp;amp;quot; contentType=&
  • springmvc实现jsonp跨域接口访问

    千次阅读 2017-05-18 22:14:09
    最近公司做项目,有一个功能,需要完成官网首页调用接口,完成数据的插入,用到了需要跨域的操作,经过本人的几天的研究,,终于实现了,说说网上的方法吧,将的很多,没有一个实用的,好多解释也不是很明确,所以本人在刚做完...
  • tp5+ajax 实现jsonp跨域

    2018-09-12 20:03:46
    好久没更新博客了,今天加了会班,领导布置了一个需求,由于上线...我首先选择了ajax交互跨域到我A后台的方法里,注意 ajax的type 一定要看好,本人就进坑了,因为jsonp是get传参,所以A后台ajax方法接受一定要用get...
  • 需求, 用户浏览某些特定web应用时,给用户... IE主要使用了注册表生成浏览器插件, 火狐及google使用了GreaseMonkey, 涉及到跨域访问,使用了jsonp请求. 详细请自行百度.   GreaseMonkey代码截图示意(完整代码在...
  • Jsonp这个术语听起来很高大上,其实它的原理非常简单,就是利用src不受同源策略限制这一点来实现的,很多标签都有src特性。 你们可以想想为什么img标签能将不同源的百度logo拿过来? &lt;img src="...
  • springboot jsonp 跨域请求,springboot使用jsonp跨域 ================================ ©Copyright 蕃薯耀 2020-11-25 https://www.cnblogs.com/fanshuyao/ * spring框架4.1加入jsonp配置,在5.1时,删除不再...
  • 主要介绍了AngularJS实现JSONP跨域访问数据传输功能,较为详细的分析了JSONP的概念、功能并结合实例形式给出了AngularJS使用JSONP进行跨域访问数据传输的相关技巧,需要的朋友可以参考下
  • JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理
  • 本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧
  • 轻松搞定JSONP跨域请求

    万次阅读 多人点赞 2016-07-26 17:49:49
    本文介绍了通过JSONP实现跨域请求,首先介绍了“同源策略”,然后介绍了同构JavaScript动态加载script标签的方法,实现JSONP跨域,最后介绍了jQuery中对JSONP的封装和使用
  • 主要介绍了Ajax jsonp跨域请求实现方法的相关资料,需要的朋友可以参考下
  • jsonp跨域原理解析

    万次阅读 多人点赞 2018-09-01 19:25:07
    由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。 同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域...
  • 当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。
  • 本文主要是介绍了JSONP跨域是如何实现的,并探讨下JSONP跨域的原理。以及采用JSONP跨域GET请求解决Ajax跨域访问问题,需要的朋友可以参考下
  • 主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,650
精华内容 18,660
关键字:

如何实现jsonp跨域