js跨域及解决方案

最新推荐文章于 2022-03-03 09:58:40 发布

多则惑少则明

最新推荐文章于 2022-03-03 09:58:40 发布

阅读量1.8k

点赞数

分类专栏：【技术】手机m站【技术】JavaScript/python/shell

【技术】JavaScript/python/shell 同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

【技术】手机m站

24 篇文章 0 订阅

订阅专栏

1. 产生原因

浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。

一个网站的网址组成包括协议名，子域名，主域名，端口号。当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。
即使是在 http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题

2. 产生场景

当要在在页面中使用js获取其他网站的数据时，就会产生跨域问题：

XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.

3. 解决方案

方案选择：

Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的，所以如果产品面向的是PC端，就要使用服务端代理或jsonp

1) 使用jsonp

原理

jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制(你可以在你的网页中设置script的src属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据，请求时添加一个参数为callbakc=?，?号时你要执行的回调方法。

操作：需要前端，后端同时做修改

具体参考：

http://segmentfault.com/a/1190000002647143#articleHeader5

JSONP实现

1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语法的方式,生成一个function

2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。

3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的回调函数里(动态执行回调函数)。

这种动态解析js文档和eval函数是类似的。

jsonp例子：

后端接口：

手动调用接口： http://localhost:8080/springmvc0006/base/json.do?callback=jsonpCallback

接口返回：

jsonpCallback({"name":"content1","age":"20"})

import java.io.IOException;  
import java.io.PrintWriter;  
import java.util.HashMap;  
import java.util.Map;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  

import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;

import net.sf.json.JSONObject; 
//JAVA中使用JSON进行数据传递,用于java生成json字符串，和java解析json字符串
//net.sf.json jar包


@Controller 
public class JsonpController {
	@RequestMapping("/base/json.do")  
    public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
       try {  
        response.setContentType("text/plain");  
        response.setHeader("Pragma", "No-cache");  
        response.setHeader("Cache-Control", "no-cache");  
        response.setDateHeader("Expires", 0);  
        Map<String,String> map = new HashMap<String,String>();    
        map.put("name", "content1");  
        map.put("age", "20");  
        PrintWriter out = response.getWriter();       
        JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  
        String jsonpCallback = request.getParameter("callback");//客户端请求参数  
//        out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  
        
        System.out.println(resultJSON.toString());
        out.println(jsonpCallback+"("+resultJSON.toString()+")");//返回jsonp格式数据  
        out.flush();  
        out.close();  
      } catch (IOException e) {  
       e.printStackTrace();  
      }  
    }  
	public static void main(String[] args) {
		// TODO Auto-generated method stub

	}

}

前端代码：前端解析jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>


</head>
<body>
<script type="text/javascript">
    $(function(){
       //方法一
         $.getJSON("http://localhost:8080/springmvc0006/base/json.do?sid=1494&busiId=101&callback=?",
         function(data){
             alert(data.name);
         $("#showcontent").text("Result:"+data.name)
         });
      //方法二
        $.ajax({
            type : "get",
            async:false,
            url : "http://localhost:8080/springmvc0006/base/json.do?sid=1494&busiId=101",
            dataType : "jsonp",//数据类型为jsonp
            jsonp: "callback",//服务端用于接收callback调用的function名的参数
            success : function(data){
                $("#showcontent1").text("Result1:"+data.name)
            },
            error:function(){
                alert('fail');
            }
        });



});

//方法三
</script>

<script type="text/javascript">

    function jsonpCallback(result){
        alert(result.name);//jsonpCallback({"name":"content1","age":"20"})
    }


</script>
<script type="text/javascript"src="http://localhost:8080/springmvc0006/base/json.do?sid=1494&busiId=101&callback=jsonpCallback"></script>

<div id="showcontent">Result:</div>
<div id="showcontent1">Result1:</div>
</body>
</html>

注意： js中的 jsonp: "callback" 与后端/base/json.do?callback=jsonpCallback 二者的参数名一致。

2）服务端设置Request Header头中Access-Control-Allow-Origin

这种方式只要服务端把response的header头中设置Access-Control-Allow-Origin为制定可请求当前域名下数据的域名即可。一般情况下设为即可。这样客户端就不需要使用jsonp来获取数据。

操作：只需要后端（服务器）做设置即可

浏览器支持

Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的

3）服务端代理

这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，

再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。

http://segmentfault.com/a/1190000002647143#articleHeader5

http://my.oschina.net/lwaif/blog/481154?p={{totalPage}}

4）基于script标签实现跨域

script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下：

Java代码收藏代码
var script = document.createElement('script');
script.src = "http://aa.xx.com/js/*.js";
document.body.appendChild(script);

这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。

5）基于iframe实现跨域

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数

具体参考：

http://my.oschina.net/lwaif/blog/481154?fromerr=8OIlQWkJ

6）更多解决方案

使用HTML5中新引进的window.postMessage方法来跨域传送数据：和使用window.name来进行跨域

http://www.cnblogs.com/2050/p/3191744.html

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

多则惑少则明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js跨域及解决方案

1. 产生原因浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。一个网站的网址组成包括协议名，子域名，主域名，端口号。当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。即使是在 http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题
复制链接

扫一扫