jsonp 跨域问题

61 篇文章 0 订阅
10 篇文章 0 订阅

一.客户端

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6. <script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>  
  7. </head>  
  8. <script type="text/javascript">  
  9. $(function(){     
  10.     /*  
  11.     //简写形式,效果相同  
  12.     $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",  
  13.             function(data){  
  14.                 $("#showcontent").text("Result:"+data.result)  
  15.     });  
  16.     */  
  17.     $.ajax({  
  18.         type : "get",  
  19.         async:false,  
  20.         url : "http://app.example.com/base/json.do?sid=1494&busiId=101",  
  21.         dataType : "jsonp",//数据类型为jsonp  
  22.         jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  
  23.         success : function(data){  
  24.             $("#showcontent").text("Result:"+data.result)  
  25.         },  
  26.         error:function(){  
  27.             alert('fail');  
  28.         }  
  29.     });   
  30. });  
  31. </script>  
  32. <body>  
  33. <div id="showcontent">Result:</div>  
  34. </body>  
  35. </html>  

 二.服务器端

Java代码   收藏代码
  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5. import javax.servlet.http.HttpServletRequest;  
  6. import javax.servlet.http.HttpServletResponse;  
  7. import net.sf.json.JSONObject;  
  8. import org.springframework.stereotype.Controller;  
  9. import org.springframework.web.bind.annotation.RequestMapping;  
  10.   
  11. @Controller  
  12. public class ExchangeJsonController {  
  13.     @RequestMapping("/base/json.do")  
  14.     public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
  15.        try {  
  16.         response.setContentType("text/plain");  
  17.         response.setHeader("Pragma""No-cache");  
  18.         response.setHeader("Cache-Control""no-cache");  
  19.         response.setDateHeader("Expires"0);  
  20.         Map<String,String> map = new HashMap<String,String>();   
  21.         map.put("result""content");  
  22.         PrintWriter out = response.getWriter();       
  23.         JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  
  24.         String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
  25.         out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  
  26.         out.flush();  
  27.         out.close();  
  28.       } catch (IOException e) {  
  29.        e.printStackTrace();  
  30.       }  
  31.     }  
  32. }  

 

Vue是一款非常流行的JavaScript框架,而Axios是一个基于Promise的HTTP客户端工具库。然而,在使用Vue和Axios时,我们可能会遇到跨域问题。当我们从一个域名发送HTTP请求到另一个域名时,由于浏览器的同源策略限制,会产生跨域问题Jsonp是一种解决跨域问题的方法之一。 Jsonp全称为JSON with Padding,它通过在前端创建一个script标签,并设置其src属性为包含回调函数的URL,来实现跨域请求。服务器在收到请求后,将返回一个JavaScript函数调用,并将数据作为参数传入该函数中。这样,前端页面就可以通过定义该回调函数,获取到服务器返回的数据。 在Vue中使用Axios发送Jsonp请求,可以通过设置Axios的`params`选项来实现。具体步骤如下: 1. 首先,在Vue项目中安装Axios库:`npm install axios` 2. 然后在Vue组件中引入Axios:`import axios from 'axios'` 3. 创建一个方法来发送Jsonp请求: ```javascript methods: { fetchData() { axios({ method: 'jsonp', url: 'http://example.com/api', params: { callback: 'jsonpCallback', // 回调函数名 } }) .then(response => { console.log(response.data); // 获取到服务器返回的数据 }) .catch(error => { console.log(error); }); } } ``` 4. 在上述代码中,通过设置`params`属性将回调函数名传递给服务器。服务器在返回数据时,会将回调函数名拼接到返回数据的尾部。 5. 最后,在模板或其他地方调用该方法,即可发送Jsonp请求来获取跨域数据。 需要注意的是,由于Jsonp使用`<script>`标签加载数据,因此只能发送GET请求。同时,为了保证安全性,我们需要对返回的数据进行校验和过滤,以防止恶意注入脚本。 以上就是通过Vue和Axios发送Jsonp请求来解决跨域问题的方法。希望这能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值