jsonp解决json数据跨域问题

最新推荐文章于 2024-08-12 09:48:39 发布
最新推荐文章于 2024-08-12 09:48:39 发布
阅读量286 收藏
点赞数
分类专栏： 解决方案 文章标签： jsonp java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36335126/article/details/103981030
版权
本文介绍了如何利用jsonp解决跨域请求问题。在跨域场景下，由于浏览器安全限制，JavaScript无法直接发起Ajax请求。文中详细阐述了跨域的概念，并提供了两种不同的方案：一种是通过Controller获取cookie中的token并查询用户信息；另一种是利用JavaScript取token并使用ajax。重点讨论了jsonp的工作原理，包括客户端如何使用jQuery实现和服务器端如何配合，展示了两种不同的响应数据格式。
摘要由CSDN通过智能技术生成

5.2. 首页展示用户名

方案一：在Controller中取cookie中的token数据，调用sso服务查询用户信息。
1、当用户登录成功后，在cookie中有token信息。
2、从cookie中取token根据token查询用户信息。
3、把用户名展示到首页。

方案二：当页面加载完成后使用js取token的数据，使用ajax请求查询用户信息。

问题：服务接口在sso系统中。Sso.e3.com(localhost:8088)，在首页显示用户名称，首页的域名是www.e3.com(localhost:8082)，使用ajax请求跨域了。

Js不可以跨域请求数据。
什么是跨域：
1、域名不同
2、域名相同端口不同。

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

Jsonp不是新技术，跨域的解决方案。使用js的特性绕过跨域请求。Js可以跨域加载js文件。

5.3. Jsonp原理
在这里插入图片描述
5.4. Json实现

5.4.1. 客户端
使用jQuery。
修改这两处
在这里插入图片描述

5.4.2. 服务端
1、接收callback参数，取回调的js的方法名。
2、业务逻辑处理。
3、响应结果，拼接一个js语句。
方法一：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  逸轩要冲鸭
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
通过jsonp获取json数据实现AJAX跨域请求

				
			

			

				

					10-20
				

			

		

		

			
				
JSONP（JSON with Padding）是一种解决浏览器同源策略限制，实现AJAX跨域请求的方法。在Web开发中，由于浏览器的安全策略，JavaScript通常不能从不同的域名下获取数据，即同源策略。但JSONP巧妙地利用了HTML允许跨域...

			
		

	



                

              
                



	

		

			

				
					
JSONP跨域GET请求解决Ajax跨域访问问题

				
			

			

				

					12-03
				

			

		

		

			
				
前几天，工作上有一新需求，需要前端web页面异步调用后台的Webservice方法返回信息。实现方法有多种，本例采用jQuery+Ajax，完成后，在本地调试了一切ok，但是部署到服务器上以后就出现问题了，后台服务调用没有响应，怎么回事？代码没怎么改动，唯一修改的地方就是jQuery的ajax方法中的url地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same- Origin Policy”（同源策略）。这一策略对于JavaSc

			
		

	



                


  
              

                


	

		

			

				
					
解决Json数据跨域问题

				
			

			

				

					
				

				

					04-11
					
					300
					
				

			

		

		

			
				
Json跨域获取数据。很多人在用jQuery的getJSON（“xxx”）发现获取不到数据，纠结了很久才发现是跨域问题 今天来分享一下我是怎么解决Json数据跨域问题的

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...

			
		

	





	

		

			

				
					
【JS】js处理跨域的方案之一：jsonp 详解

					
最新发布

				
			

			

				

					呆呆狗
				

				

					08-12
					
					774
					
				

			

		

		

			
				
js处理跨域的方案之一：jsonp 详解；跨域的定义；JSONP的案例

			
		

	



		

			
		



	

		

			

				
					
json跨域问题

				
			

			

				

					weixin_43686867的博客
				

				

					07-27
					
					428
					
				

			

		

		

			
				
JSON的跨域问题简介实现原理天气查询的DEMO效果效果

作者凌杰林
参考链接：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ynnrA3xJ-1595836563884)(https://blog.csdn.net/upxiaofeng/article/details/51095825)]

简介
在我们使用ajax访问其它服务其上的数据是候，经常会出现跨域问题。
原因：由于JavaScript语言安全限制的同源策略造成的，所谓同源策略,是指一段脚本只能读取同一来源的窗口

			
		

	





	

		

			

				
					
通过jsonp解决跨域请求问题

				
			

			

				

					温大侠的博客
				

				

					06-26
					
					354
					
				

			

		

		

			
				
处于安全考虑,浏览器采用同源策略限制不同协议、域名、端口之间的ajax请求,但是当我们有需求这样做的时候该怎么办呢?经过前辈们的尝试发现script标签不受同源策略的限制,因此制定了一套方案用来解决跨域的问题.如下,我们在site1.dev中向site2.dev发起一个ajax跨域请求:


<!DOCTYPE html>
<html>
<head>
	<...

			
		

	





	

		

			

				
					
jsonp解决跨域请求问题

				
			

			

				

					YingZiBo的博客
				

				

					11-29
					
					368
					
				

			

		

		

			
				
之前了解了跨域，只是有些印象，正好这次前后端分离可以用到，在此详细记录一下。 
1.跨域问题：浏览器出于安全考虑，不允许js的ajax跨域请求资源。跨域的定义：域名或端口号不同都是跨域2.解决跨域问题：本文的解决方案：jsonp3.jsonp原理： 
jsonp即json+padding，动态创建script标签，利用script标签的src属性可以获取任何域下的js脚本，通过这个特性（也可以说是漏

			
		

	





	

		

			

				
					
利用jsonp解决js读取本地json跨域的问题

				
			

			

				

					10-17
				

			

		

		

			
				
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中，由于同源策略的限制，AJAX无法直接从本地文件系统获取JSON数据。然而，JSONP（JSON with Padding）是一种绕过同源策略的技术，尤其适用于GET...

			
		

	





	

		

			

				
					
使用 JSONP 实现跨域（速通）

				
			

			

				

					高大志leo的博客
				

				

					08-15
					
					3557
					
				

			

		

		

			
				
两分钟，使用 JSONP 实现跨域。

			
		

	





	

		

			

				
					
使用jsonp完美解决跨域问题

				
			

			

				

					12-12
				

			

		

		

			
				
调用web接口，get请求，发现提示：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
这个和安全机制有关，默认不允许跨域调用

处理手段：使用jsonp格式， ajax请求参数dataType:’JSONP’。
 代码如下:
$.ajax({
        url: “http://…….”,
        type: ‘GET’,
        dataType: ‘JSONP’,//here
        success: function (data) {
        

			
		

	





	

		

			

				
					
使用Jsonp方式跨域获取json 

				
			

			

				

					07-27
				

			

		

		

			
				
NULL
博文链接：https://8366.iteye.com/blog/744057

			
		

	





	

		

			

				
					
jsonp跨域请求出现问题

				
			

			

				

					weixin_30765577的博客
				

				

					11-22
					
					106
					
				

			

		

		

			
				
最近遇到一个问题，jsonp跨域请求时，报错：
客户端代码：


上网查了一下，大致意思是，返回的格式不正确：
参考的文章：https://www.cnblogs.com/ada-zheng/p/4349840.html
重点：
因此，在服务器端，添加代码：

综上，问题解决了。

转载于:https://www.cnblogs.com/hupengyin/p/999993...

			
		

	





	

		

			

				
					
vue中Axios异步通信

				
			

			

				

					qq_45554909的博客
				

				

					12-22
					
					312
					
				

			

		

		

			
				
1.什么是Axios
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异 步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API  [ JS中链式编程 ]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON 数据
客户端支持防御 XSRF（跨站请求伪造）
GitHub： https://github.com/axios/axios 
中文文档：

			
		

	





	

		

			

				
					
jsonp方法跨域的过程

				
			

			

				

					杨欢博的博客
				

				

					01-07
					
					557
					
				

			

		

		

			
				
说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。
但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。
JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿

			
		

	





	

		

			

				
					
SpringBoot多跨域请求的支持（JSONP）

				
			

			

				

					weixin_33877885的博客
				

				

					05-31
					
					85
					
				

			

		

		

			
				
 
在我们做项目的过程中，有可能会遇到跨域请求，所以需要我们自己组装支持跨域请求的JSONP数据，而在4.1版本以后的SpringMVC中，为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据（SpringBoot接收解析web请求是依赖于SpringMVC实现的）。下面我们就看一下怎么用AbstractJsonpResponseBodyAd...

			
		

	





	

		

			

				
					
通过Jsonp实现跨域传输

				
			

			

				

					chuanougong9825的博客
				

				

					05-11
					
					107
					
				

			

		

		

			
				
背景

Js出于安全考虑，不允许跨域调用其他页面的对象。这里跨域指：协议、子域、接口至少有一个不相同的情况的情况。如果直接请求，会报：XMLHttpRequest cannot load错误。
实现跨域的几种方法：

jsonp
jsonp类似通过使用带有src属性的标签（script img...

			
		

	





	

		

			

				
					
jsonp的使用

				
			

			

				

					闫先生的博客
				

				

					11-23
					
					1186
					
				

			

		

		

			
				
一、什么是Jsonp

JSONP是一种非官方跨域数据交互协议。

二、Ajax请求


    var param = new Object();
    $.ajax({
        url: "**、",
        type: "POST",
        dataType: "jsonp",  //json不支持跨域请求,只能使用jsonp
        data: ...

			
		

	





	

		

			

				
					
JSONP解决Ajax跨域问题详解

				
			

			

				

					
				

			

		

		

			
				
然而，为了实现跨域数据交互，我们可以利用JSONP（JSON with Padding）这一技术。以下是一个使用jQuery实现JSONP的示例代码。"  在JavaScript中，当我们尝试使用AJAX进行跨域请求时，浏览器会因为同源策略阻止请求。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值