平时工作中经常被JavaScript跨域问题所困扰，其实有很多种解决方式，下面给大家介绍常用的几种：

1.jsonp解决跨域问题

客户端代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jsonp-跨域</title>

<script type="text/javascript" src="resources/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    function callbackFn(data){

        data = typeof data != 'string' ? JSON.stringify(data) : data;

        console.log('callback:'+data);

    }

    function jsonpFn(){

        $.ajax({

            type:"get",

            dataType:"jsonp",

            url:"http://localhost:9393/ccy_server/server.jsp",

            jsonpCallback:"callbackFn",

            success:function(data){

                data = typeof data != 'string' ? JSON.stringify(data) : data;

                console.log('success.data:'+data);

            }

        });

    }

    function ajaxFn(){

        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

        var url = "http://localhost:9393/ccy_server/server.jsp";

        xmlhttp.onreadystatechange = function(){

            if(xmlhttp.readyState==4){

                if(xmlhttp.status==200){

                    callbackFn(xmlhttp.responseText);

                }

            }

        }

        xmlhttp.open('GET',url,true);

        xmlhttp.send(null);

    }

    ajaxFn();

    //jsonpFn();

</script>

</head>

<body>

</body>

</html>

服务端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

    String result = "{\"name\":\"ccy\",\"age\":18,\"info\":{\"address\":\"wuhan\",\"interest\":\"playCards\"}}";

    out.println("callbackFn("+result+")");

%>

相信大家对此种方式并不陌生，需要引用jquery库文件，并且要与服务端进行协调处理。

我先写了个简单的ajax调用非同源的异步请求直接报错

执行jsonpFn方法

成功获取服务端信息！

2.window.name解决跨域问题

在客户端浏览器中每个页面都有一个独立的窗口对象window，默认情况下window.name为空，在窗口的生命周期中，载入的所有页面共享一个window.name并且每个页面都有对此读写的权限，window.name会一直存在当前窗口，但存储的字符串不超过2M。

http://localhost:8383/ccy_client/window_name.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.name-跨域</title>

<script type="text/javascript">

    window.name = "我是 window.name 字符串";

    setTimeout(function(){

        window.location = "http://localhost:9393/ccy_server/window_name.html";

    },2000);

</script>

</head>

<body>

</body>

</html>

http://localhost:9393/ccy_server/window_name.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.name-跨域</title>

<script type="text/javascript">

    var str = window.name;

    console.log('ccy_server.window_name:'+str);

</script>

</head>

<body>

</body>

</html>

chrome打印信息

上面是以window.location跳转的方式获取window.name字符串信息，平时开发中经常需要异步获取，请继续往下看：

http://localhost:8383/ccy_client/window_name_iframe.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.name-跨域</title>

</head>

<body>

<script type="text/javascript">

    var boo = false;

    var iframe = document.createElement('iframe');

    var loadData = function() {

        if (boo) {

            var data = iframe.contentWindow.name;    //获取window.name

            console.log(data);

            //销毁数据

            iframe.contentWindow.document.write('');

            iframe.contentWindow.close();

            document.body.removeChild(iframe);

        } else {

            boo = true;

            iframe.contentWindow.location = "";    // 设置的代理文件,iframe重新载入

        }

    };

    iframe.src = 'http://localhost:9393/ccy_server/window_name_iframe.html';

    if (iframe.attachEvent) {

        iframe.attachEvent('onload', loadData);

    } else {

        iframe.onload  = loadData;

    }

    document.body.appendChild(iframe);

</script>

</body>

</html>

http://localhost:9393/ccy_server/window_name_iframe.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>window.name-跨域</title>

<script type="text/javascript">

    window.name = '我是 http://localhost:9393/ccy_server/window_name_iframe.html';

</script>

</head>

<body>

</body>

</html>

chrome打印信息

成功获取非同源地址的数据信息，主要是通过iframe的src属性，类似含有src属性的标签都可以成功处理跨域问题（img,script）

3.postMessage解决跨域问题

h5新特性，window.postMessage(msg,targetOrigin);

msg:传入的字符串信息

targetOrigin:目标源（协议主机端口有效）

同样借助iframe进行跨域操作

http://localhost:8383/ccy_client/postMessage.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>postMessage-跨域</title>

</head>

<body>

<iframe id="ifr" src="http://localhost:9393/ccy_server/postMessage.html" style="display: none;"></iframe>

<br>

<input id="txt" type="text" style="width:600px;height:70px;"/>

<br>

<input id="btn" type="button" value="获取9393数据" onclick="getData();" style="width:180px;height:60px;"/>

<script type="text/javascript">

    var data;

    function handleMsg(e){

        e = e || event;

        data = e.data;

        console.log('8383:'+e.data);

    }

    if(window.addEventListener){

        window.addEventListener('message', handleMsg);

    }else{

        window.attachEvent('onmessage', handleMsg);

    }

    function getData(){

        document.getElementById('txt').value=data;

        var msg = 'http://localhost:8383/ccy_client/postMessage.html';

        window.frames[0].postMessage(msg, 'http://localhost:9393');

    }

</script>

</body>

</html>

http://localhost:9393/ccy_server/postMessage.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>postMessage-跨域</title>

</head>

<body>

<script type="text/javascript">

    function handleMsg(e){

        e = e || event;

        console.log('9393:'+e.data);

    }

    if(window.addEventListener){

        window.addEventListener('message', handleMsg);

    }else{

        window.attachEvent('onmessage', handleMsg);

    }

    window.onload = function(){

        var msg = '我是 http://localhost:9393/ccy_server/postMessage.html';

        window.parent.postMessage(msg, 'http://localhost:8383');

    }

</script>

</body>

</html>

chrome打印信息

点击“获取9393数据”

成功获取非同源数据，将非同源地址嵌入获取数据页面窗口。

4.Java解决跨域问题

通过客户端页面的ajax异步请求同源页面，再通过java的HttpURLConnect或者HttpClient进行转换即可，此处就不再赘述。

还有一种就是设置服务端的Header，我们果果乐园新版的api就是这么处理的。

5.参考资料

https://www.sojson.com/blog/121.html

https://www.jianshu.com/p/43ff69d076e3

JavaScript权威指南

欢迎纠错~~~

JavaScript跨域解决方式的更多相关文章

  1. JavaScript跨域解决方法大全

    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...

  2. JavaScript跨域解决办法

    在找到跨域解决办法之前,我们要先弄清楚一些基本概念 什么是跨域? 什么是“同源策略”? 跨文档消息通信 & 跨域请求数据 主域相同而子域不同 不同域名的跨域访问 什么是跨域? 简单地理解就是因 ...

  3. JS跨域解决方式 window.name

    window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等 ...

  4. js跨域解决方式

    什么是跨域? 概念:仅仅要协议.域名.port有不论什么一个不同,都被当作是不同的域.(所谓同源是指,域名.协议,port同样.),对于port和协议的不同,仅仅能通过后台来解决. URL 说明 是否 ...

  5. [转]JS跨域解决方式 window.name

    本文转自:http://www.cnblogs.com/lichuntian/p/4909465.html window.name 传输技术,原本是 Thomas Frank 用于解决 cookie ...

  6. Javascript跨域请求的几种解决方法

    什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...

  7. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  8. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  9. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

随机推荐

  1. leveldb 学习记录(二) Slice

    基本每个KV库都有一个简洁的字符串管理类 比如redis的sds  比如leveldb的slice 管理一个字符串指针和数据长度 通过对字符串指针 长度的管理实现一般的创建 判断是否为空 获取第N个位 ...

  2. Effective C++ 笔记：条款 30 inline

    30 : Understand the ins and outs of inlining 1 inline申请书 1.1 类内部实现函数包含隐藏的inline申请 class Human { publ ...

  3. SGTtrick

    SGTtrick By 蒟蒻 ldxoiBy\ 蒟蒻\ ldxoiBy 蒟蒻 ldxoi Chapter 1.关于线段树操作的一些分析 我们知道,线段树有两个核心的函数pushdownpushdown ...

  4. LOJ-10105（欧拉回路模板，套圈法，递归）

    题目链接:传送门 思路: (1)用邻接表存储有向图和无向图,有向图和无向图的每条边均站两个单元,无向图有正向边和反向边的区分. (2)有向图有欧拉回路:所有点的入度=出度: 无向图有欧拉回路:所有点的 ...

  5. 走进JDK(七)------LinkedList

    要学习LinkedList,首先得了解链表结构.上篇介绍ArrayList的文章中介绍了底层是数组结构,查询快的问题,但是删除时,需要将删除位置后面的元素全部左移,因此效率比较低. 链表则是这种机制: ...

  6. Python学习第2章

    1.字符串: python中创建字符串我们可以使用引号''或"'. python访问子字符串,可以使用方括号来截取字符串: var="hello world!" var2 ...

  7. Oracle OMF管理数据文件

    1.什么是OMF? Oracle managed file的缩写,简单的理解,就是oracle自己管理自己的文件,可以是dbf,redolog 等等,具体可以参考官方文档Adiministrator中 ...

  8. 9.3AspectJ

    1.1 介绍 AspectJ是一个基于Java语言的AOP框架 Spring2.0以后新增了对AspectJ切点表达式支持 @AspectJ 是AspectJ1.5新增功能,通过JDK5注解技术,允许 ...

  9. asp.net对接拼多多

    asp.net对接拼多多视频地址:https://www.bilibili.com/video/av43512047/?p=7

  10. [CocoaPods]客户端加载第三方库

    请先阅读另一篇博文铺垫知识基础:[CocoaPods]终端方式集成第三方库 客户端的Github地址:CocoaPods-app 点击下载客户端: [CocoaPods客户端] 安装下载的文件.软件界 ...