[Web]jsonp跨域访问小结

最新推荐文章于 2022-04-29 20:11:56 发布

solo318

最新推荐文章于 2022-04-29 20:11:56 发布

阅读量477

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/qiantudou/article/details/48679447

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做到跨域访问的内容，自己做下小结，以便之后查询。

名词解释：

同源：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

浏览器同源策略：一个域加载的脚本不允许访问其他域（协议、域名、端口任何一个不一样即表示其他域）的文档属性。打个比方说，百度网站上加载的js脚本，不可以访问谷歌网站上的属性。

跨域访问：浏览器同源策略带来了一定的安全性，同时也限制了一些功能的处理。跨域访问即允许一个域访问另外一个域。协议、域名、端口任何一个不同，均为跨域。

背景：

网站A在某些特定处理过后，需要通知网站B做一定的操作，甚至需要返回的数据。

解决方法

跨域方式：

这里只提到ajax的跨域方法。

网站A的前端：

<!DOCTYPE html>
<html>
<head>
<title>jsonp test</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#btn").click(function(){ 
    $.ajax({ 
      type: "get", 
      async: false, 
      <span style="color:#ff0000;">url: "http://localhost:8080/wx/jsonpAction.action", </span>
      dataType: "jsonp", 
      <span style="color:#ff0000;">jsonp: "callback",
      jsonpCallback: "jsonpCallback",</span>
      success: function(data) { 
        alert("success:" + data.abc); 
      }, 
      error: function(data, e) { 
        alert("failure" + e); 
      } 
    }); 
  });

});

</script>
</head>
<body>
  <p>This is a test.</p>
  <button id="btn">click</button>
</body>
</html>

网站B端

struts.xml（struts2的配置文件中）

<action name="jsonpAction" class="com.wx.WxAction">
  <interceptor-ref name="json">
    <param name="enableSMD">true</param>
  </interceptor-ref>
  <result type="<span style="color:#ff0000;">stream</span>" name="success">
    <param name="inputName">inputStream</param>
  </result>
  <result type="stream" name="error">
    <param name="inputName">inputStream</param>
  </result>
</action>

WxAction.java中

public InputStream getInputStream() throws Exception {
  return new ByteArrayInputStream("<span style="color:#ff0000;">jsonpCallback({'abc':'124'})</span>".getBytes());
}

如上，可以实现ajax跨域访问的问题。

其中，json和jsonp格式上有不同。

json格式：{"abc":"1", "abc2":"2"}

jsonp格式：callback({"abc":"1", "abc2":"2"})

所以，上面WxAction中，以流的方式返回了jsonp格式的内容。

如果WxAction的配置文件中，返回的type为json时，会出现如下错误：

Uncaught SyntaxError: Unexpected token

此外，跨域方式还有很多种，我还尝试过jquery的jsonp方式，写法如下，但是没有成功，有兴趣的可以关注下。

附：

jquery的jsonp方式官网说明：

http://api.jquery.com/jquery.getjson/

$("#btn").click(function(){
  var url='http://localhost:8080/wx/jsonpAction.action?jsonp=?';
  $.getJSON(curl, function(){
    console.log("success");
  })
  .done(function() {
    console.log("second success");
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
});