javascript跨域,js解决跨域的三种方法

什么是javascript跨域访问

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的，

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

相关问答

Q1: jsonp跨域的原理是什么？

jsonp其核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。

JSONP(JSON with Padding（填充）)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

相关信息：

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。

同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。

Q2: JavaScript 怎么跨域获取 iframe 中的内容

要解释这个问题，首先要解释两个技术点。

每个“窗口”都是一个JS Runtime，即JS的运行时。如果只有一个窗口，那么就只有一个Runtime；如果一个窗口下面还有一个iframe，那么就有两个Runtime；以此类推。

Runtime之间互操作（或者通信）是有跨域限制的。也就是说，如果这个窗口本身是a.baidu.com域名下的页面，那么如果这个页面下还有一个iframe，这个iframe中加载的页面是b.baidu.com域名下的。那么外层的JS。就不能跟这个iframe中的内容互操作（或者通信）。

因此外层Runtime中的JS想操作内层iframe中的内容，就必须要避免跨域限制。要么内层iframe加载页面的域名跟外层是一样的。要么就是需要在内层iframe加载的页面中执行document.domain = 'baidu.com';从而设置跟外层的主域相同。

例如，当前页面是a.baidu.com/test.html

html

head

/head

body

iframe id="iFrm1" src = "0c893329b8c9af6ff578db9b1a128d13"margin: 0px; padding: 0px; color: rgb(69, 69, 69); font-family: arial, 宋体, sans-serif, tahoma, 'Microsoft YaHei'; font-size: 14px; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"

iframe中加载的页面内容如下：

html

head

/head

body

div id="innerDiv"恭喜操作到内部iframe中的元素了！！！/div

script

document.domain = 'baidu.com';

/script

/body

/html

在HTML5中新增了postMessage的API。可以方便窗口跟内部iframe之间进行通信，并且可以实现跨主域通信。但是有一些限制，1.老版本的浏览器一般不支持。2.父窗口只能向iframe中发送信息，iframe只能收消息，且父窗口不能直接操作iframe中的内容。3.父窗口发送的数据也是有限制的。只能发送基本数据类型或者plain object。

Q3: 怎样用JS跨域实现POST

这次给大家带来怎样用JS跨域实现POST，JS跨域实现POST的注意事项有哪些，下面就是实战案例，一起来看一下。

javascript 跨域是一个很常见的问题，其中 jsonp 是一个最常用的手段，但是 jsonp 只支持 get，不支持 post，所以如果想通过 jsonp 来 post 一些数据，就头大了。

此处通过在一个 iframe 中生成 form 表单的形式来实现 post，并通过 postMessage 来向调用者返回值。

第一步，我们先实现一个接受 jsonp 的后端代码，至于用什么语言实现，各位自已决定。

Q4: js跨域调用如何实现？

1.什么是跨域

经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

2.解决方案：

服务器端:

        protected void Page_Load(object sender, EventArgs e)

        {

            string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

            Response.Clear();

            Response.Write(result);

            Response.End();

        }

客户端:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

    title/title

    script type="text/javascript"

        var result = null;

        window.onload = function () {

            var script = document.createElement("script");

            script.type = "text/javascript";

            script.src = "";

            var head = document.getElementsByTagName("head")[0];

            head.insertBefore(script, head.firstChild);

        };

        function callback(data) {

            result = data;

        }

        function b_click() {

            alert(result.name);

        }

    /script

/head

body

    input type="button" value="click me!" onclick="b_click();" /

/body

/html

Q5: javascript 跨域 问题

XMLHttpRequest2 进行跨域访问时需要服务器许可，不是任何域都接受跨域请求的。先来看一下从 Yahoo YQL 域返回的响应头（Response Header ）：

HTTP/1.1 200 OK

Set-Cookie: AO="o=1s=1dnt=1"; Version=1; Domain=yahoo.com; Max-Age=630720000; Expires=Sat, 18-Jun-2033 10:07:41 GMT; Path=/

Access-Control-Allow-Origin: *

Cache-Control: public, max-age=899

Content-Type: text/xml;charset=utf-8

Content-Encoding: gzip

Vary: Accept-Encoding

Date: Sun, 23 Jun 2013 10:07:40 GMT

注意里面有一条标识 Access-Control-Allow-Origin:* ，这就表示允许跨域访问，所以可以正常访问该域，而对于其他没有该标识的域就会出现禁止访问提示。

那么如何设置呢？如果要接受跨域访问请求，就必须在服务器端返回的资源中加入 Access-Control-Allow-Origin 头标识， Access-Control-Allow-Origin 的值可以是 URL 或 *，如果是 URL 则只会允许来自该 URL 的请求，* 则允许任何域的请求。比如，在 HTML 中可以设置：

meta http-equiv="Access-Control-Allow-Origin" content="*"

或

meta http-equiv="Access-Control-Allow-Origin" content=""