详解js跨域问题

最新推荐文章于 2024-06-05 00:40:27 发布
最新推荐文章于 2024-06-05 00:40:27 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 网络编程

什么是跨域？

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许

对于端口和协议的不同，只能通过后台来解决。

跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/trigkit4",true);
    xhr.send();
</script>

以上的trigkit4是相对路径，如果我们要使用CORS，相关Ajax代码可能如下所示：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();
</script>

代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

要解决跨域的问题，我们可以使用以下几种方法：

通过jsonp跨域

现在问题来了？什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。

JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：

callback({"name","trigkit4"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。 例如：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

最终，输出结果为：dosomething(['a','b','c']);

如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    });
</script>

jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

JSONP的优缺点

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

CORS和JSONP对比

CORS与JSONP相比，无疑更为先进、方便和可靠。

    1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

    2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

    3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。

通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。
不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

<script type="text/javascript">
    function test(){
        var iframe = document.getElementById('ifame');
        var win = document.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }
</script>
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>

这个时候，document.domain就可以派上用场了，我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面 http://www.example.com/a.html 中设置document.domain:

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>

2.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = 'example.com';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

修改document.domain的方法只适用于不同子域的框架间的交互。

使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

总结一些跨域的方式

1、可能平时最常用到的就是get方式的jsonp跨域，可以用jquery提供的$.ajax 、$.getJSON。

$.ajax({
    url:'接口地址',
    type:'GET',
    data:'想给接口传的数据',
    dataType:'jsonp',
    success:function(ret){
        console.log(ret);
    }
});

这样很简单的就可以实现jsonp的跨域，获取接口返回值。

想更多的了解$.ajax可以参考下面的链接，里面有很详细的介绍：链接描述

2、post方式的form表单跨域。

a.com html:
<script>
function postCallback(data){}
</script>
<form acrion='接口链接' method='post' target='ifr'></form>
<iframe name='ifr'></iframe>
a.com callback.php:
<?php
header('Content-type: text/javascript');
echo '<script>';
//回调原页面上函数处理返回结果
echo 'window.top.postcallback(' .$_GET['data']. ');';
echo '</script>';

b.com api.php:

<?php
//....
$data = '{"ret":0,"msg":"ok"}';
// ** 让结果跳转到a.com域 **
header("Location: http://a.com/callback.php?data=".urlencode($data));

3、CORS跨域

原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

注：移动终端上，除了opera Mini都支持。

利用 CORS，http://www.b.com 只需添加一个标头，就可以允许来自 http://www.a.com 的请求，下图是我在PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：

header("Access-Control-Allow-Origin:*");

也可以设置指定域名：

header("Access-Control-Allow-Origin:http://www.b.com");

js部分：

$.ajax({
    url: a_cross_domain_url,
    crossDomain: true,
    method: "POST"
});

CORS比较适合应用在传送信息量较大以及移动端来使用。

4、script标签来跨域

<script src=""></script>
js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // callback在此处执行
        js.onload = js.onreadystatechange = null;
    }
};

5、h5的postMessage

otherWindow.postMessage(message, targetOrigin);
otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message: 所要发送的数据，string类型。
targetOrigin: 用于限制otherWindow，“*”表示不作限制
a.com/index.html中的代码：

<iframe id="ifr" src=""></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                        // 若写成'http://c.com'就不会执行postMessage了
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>
b.com/index.html中的代码：

<script type="text/javascript">
    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin == 'http://a.com') {
            alert(event.data);    // 弹出"I was there!"
            alert(event.source);  // 对a.com、index.html中window对象的引用
                                  // 但由于同源策略，这里event.source不可以访问window对象
        }
    }, false);
</script>

6、子域跨域（document.domain+iframe）

www.a.com上的a.html

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html

document.domain = 'a.com';

具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = 'a.com'；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

javascript跨域的几种方法

此文章学习借鉴了一些其他前端同学的文章，自己做了个实践总结

以下的例子包含的文件均为为 http://www.a.com/a.html 、http://www.a.com/c.html 与 http://www.b.com/b.html，要做的都是从a.html获取b.html里的数据

1.JSONP

jsonp是利用script标签没有跨域限制的特性，通过在src的url的参数上附加回调函数名字，然后服务器接收回调函数名字并返回一个包含数据的回调函数

    function doSomething(data) {
        // 对data处理
    }
    var script = document.createElement("script");
    script.src = "http://www.b.com/b.html?callback=doSomething";
    document.body.appendChild(script);

    // 1.生成一个script标签，将其append在body上，向服务器发出请求
    // 2.服务器根据 callback 这个参数生成一个包含数据的函数 doSomething({"a", "1"})
    // 3.页面事先已声明doSomething函数，此时执行 doSomething(data) 这个函数，获得数据

2.HTML5的postMessage

假设在a.html里嵌套个<iframe src=""http://www.b.com/b.html" rel="nofollow">http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

a.html

    window.onload = function() {
        window.addEventListener("message", function(e) {
            alert(e.data);
        });

        window.frames[0].postMessage("b data", "http://www.b.com/b.html");
    }

b.html

    window.onload = function() {
        window.addEventListener("message", function(e) {
            alert(e.data);
        });
        window.parent.postMessage("a data", "http://www.a.com/a.html");
    }

这样打开a页面就先弹出 a data,再弹出 b data

3.window.name + iframe

window.name的原理是利用同一个窗口在不同的页面共用一个window.name，这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.html的window.name

a.html

    var iframe = document.createElement("iframe");
    iframe.src = "http://www.b.com/b.html";
    document.body.appendChild(iframe); // 现在a.html里建一个引用b.html的iframe，获得b的数据

    var flag = true;
    iframe.onload = function() {
        if (flag) {
            iframe.src = "c.html";  
// 判断是第一次载入的话，设置代理c.html使和a.html在同目录同源，这样才能在下面的else取到data
            flag = false;
        } else { // 第二次载入由于a和c同源，a可以直接获取c的window.name
            alert(iframe.contentWindow.name);

            iframe.contentWindow.close();
            document.body.removeChild(iframe);
            iframe.src = '';
            iframe = null;
        }
    }

b.html

window.name = "这是 b 页面的数据";

4.window.location.hash + iframe

b.html将数据以hash值的方式附加到c.html的url上，在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.html的hash上，当然也可以传到其他地方)

a.html

    var iframe = document.createElement("iframe");
    iframe.src = "http://www.b.com/b.html";
    document.body.appendChild(iframe); // 在a页面引用b
    function check() { // 设置个定时器不断监控hash的变化，hash一变说明数据传过来了
        var hashs = window.location.hash;
        if (hashs) {
            clearInterval(time);
            alert(hashs.substring(1));
        }
    }
    var time = setInterval(check, 30);

b.html

    window.onload = function() {
        var data = "this is b's data"; 
        var iframe = document.createElement("iframe");
        iframe.src = "http://www.a.com/c.html#" + data;
        document.body.appendChild(iframe); // 将数据附加在c.html的hash上
    }

c.html

// 获取自身的hash再传到a.html的hash里，数据传输完毕
parent.parent.location.hash = self.location.hash.substring(1);

5.CORS

CORS是XMLHttpRequest Level 2 里规定的一种跨域方式。在支持这个方式的浏览器里，javascript的写法和不跨域的ajax写法一模一样，只要服务器需要设置Access-Control-Allow-Origin: *

6.document.domain

这种方式适用于主域相同，子域不同，比如http://www.a.com和http://b.a.com
假如这两个域名下各有a.html 和b.html,

a.html

    document.domain = "a.com";
    var iframe = document.createElement("iframe");
    iframe.src = "http://b.a.com/b.html";
    document.body.appendChild(iframe);
    iframe.onload = function() {
        console.log(iframe.contentWindow....); // 在这里操作b.html里的元素数据
    }

b.html

    document.domain = "a.com";

注意：document.domain需要设置成自身或更高一级的父域，且主域必须相同。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

反向代理（Apache、Nginx）解决JS跨域问题

BY JACKSUN · 2016年3月13日

写在前面

之前介绍了JSONP的跨域方式，那是利用前端方案解决跨域问题。跨域问题也可以用后端方案解决，比如CORS（Cross－Origin－Resource－Shares）、方向代理等。今天介绍下反向代理如何解决跨域问题。
关于跨域：http://www.sundabao.com/利用JSONP解决跨域问题/
Apache和Nginx都可以实现反向代理，下面分别介绍下Apache和Nginx如何通过反向代理解决跨域问题。

Apache

Apache mod_proxy模块实现了代理／网关的功能，他实现了以下协议的代理－FTP、CONNECT（用于SSL）、HTTP0.9、HTTP1.0、HTTP1.1。此模块经过配置后可以通过以上协议或其它协议连接其它代理模块。

1、安装Apache Proxy_Http Server

vi /path/to/http.conf
//去调下面俩行的注释（＃）
#LoadModule proxy_module modules/mod_proxy.so
#LoadModule proxy_http_module modules/mod_proxy_http.so

2、配置转发规则

 ProxyRequests Off
 proxy_pass /api http://127.0.0.1:8602;
 ProxyPassReverse /api http://127.0.0.1:8602;
 proxy_set_header Host "192.168.60.31:8602";
 proxy_set_header X-Forwarded-For $remote_addr;

将api开头的请求转发到端口8602的端口服务上。

ProxyRequests Off 指令是指开启反向代理，对于客户端来说，他就是原始服务器，并且客户端不用进行特别的设置；而正向代理允许客户端通过它访问任何服务并隐藏客户端自身，因此必须采取一些安全措施确保只为授权的服务器提供服务；

ProxyPass 将一个远端服务器映射到本地服务器的URL空间中；

ProxyPassReverse 调整由反向代理服务器发送的HTTP回应头中的URL；

Proxy_set_header 是向反向代理服务器后端服务器发起请求时添加header信息，当请求的服务器有多个host时，可以通过Host选项区分。

理解正向代理与方向代理：

正向代理：

“反向代理（Reverse Proxy）是指以代理服务器来接受 Internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 Internet 请求连接的客户端，此时，代理服务器对外就表现为一个服务器。”——《实战Nginx》

正向代理

正向代理（Forward Proxy），通常都被简称为代理，就是在用户无法正常访问外部资源，比方说受到GFW的影响无法访问twitter的时候，我们可以通过代理的方式，让用户绕过防火墙，从而连接到目标网络或者服务。

Nginx

Nginx也可以通过设置proxy_pass来实现反向代理。配置如下：

location /dir {
    proxy_pass http://127.0.0.1/api;
}

反向代理的优势

  1.  请求的统一控制，包括设置权限、过滤规则等；
  2.  隐藏内部服务真实地址，暴露在外的只是反向代理服务器地址；
  3.  实现负载均衡，内部可以采用多台服务器来组成服务器集群，外部还是可以采用一个地址访问；
  4.  解决Ajax跨域问题；
  5.  作为真实服务器的缓冲，解决瞬间负载量大的问题。

参考1:http://www.uis.cc/2014/11/21/apache-nginx-Reverse-proxy/
参考2:http://www.cnblogs.com/gabrielchen/p/5066120.html
参考3:http://blog.jobbole.com/90975/



juary_01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS跨域问题详解
01-19
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制...
JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用
LENEL的砖篮
10-24 8351
关于跨域名问题还是问题么，这方面的解决实践非常多，今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下先说明一点：我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript场景一：将bbs.xxx.com的页面用iframe嵌入到www.xxx.com的中，如何在iframe内外使用js通信一级域名都是xxx.com 这个域名一定是在您的控制下，所以你只要
什么是跨域？一文弄懂跨域的全部解决方法
最新发布
06-05 1万+
什么是跨域？一文弄懂跨域的全部解决方法
详解跨域(最全的解决方案)
m0_54138989的博客
06-03 1224
1. 什么是跨域 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去 2. 常见的跨域场景 所谓的同源是指，域名、协议、端口均为相同。 http://www.nealyang.cn/index.html 调用 http://www.nealyang.cn/server.php 非跨域 h
js设置当前窗口为最上层窗口
weixin_34018202的博客
03-08 3060
实际使用iframe框架时会遇到当前窗口页面不能位于最上层窗口的情况，或者是防止自己的网站被别人放在他们的iframe中，这时就需要设置： 　　<script language="javascript" type="text/javascript"> if (window.top != null && window.top.location !=...
window.name属性详解（Javascript）
qq572069832的博客
11-17 1万+
关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefined 但是偏偏就个别特例，就是name属性 其实window自身就带有name这个属性，在控制太输入window可以可以看到 打开往下翻就可以找到 window.name直译过来是窗口名字，主要用于为超链接和表单设置目标（targets），什么意思呢，我们做个案例 建立两个网页 第一个 <!DOCTYPE html&g
详解WebSocket跨域问题解决
01-19
项目中遇到javascript跨域问题，父页面和子页面要通信，并且父子页面跨域，怎么办？ 项目中要保证父子页面通信是点对点，需要在服务端建立对父子页面WebSocket的对应关系，即父页面发的消息只被子页面收到，子页面的...
详解ajax跨域问题解决方案
10-19
【Ajax跨域问题详解及其解决方案】 Ajax跨域问题源于浏览器的同源策略，这是一种安全机制，旨在保护用户信息不被恶意网站获取。同源策略规定，JavaScript只能访问与当前页面同源（即协议、域名、端口都相同）的资源...
详解JavaScript跨域总结与解决办法
10-21
JavaScript跨域是Web开发中一个重要的概念，主要是由于浏览器的安全策略——同源策略（Same-origin policy）所引发的问题。同源策略规定，JavaScript只能访问与自身URL协议、域名和端口完全一致的网页资源。这一策略...
什么是跨域? 出现原因及解决方法
Knight
02-28 2万+
什么是跨域? 出现原因及解决方法
什么是跨域，怎么解决跨域？
似水流年QC的博客
05-13 1万+
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。JSON是一种数据交换格式（采用键值对的方式，无序组合，数组是有序组合），而JSONP是一种非官方跨域数据交互协议。跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的，是浏览器对JS实施的安全限制。注意：跨域限制是浏览器的机制，如果直接在服务端请求，是不会触发跨域限制的。
什么是跨域以及为什么会出现跨域以及跨域的解决方案
mischen520的博客
07-02 1万+
1.什么是跨域？ 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 • 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；跨域举例： 2.为什么会出现跨域？ 我们都知道要想访问一个网站，首先要知道这个网站的URL，才能够进入该网站。而URL是由协议、域名、端口组成的（协议，浏览器自动填充；域名的端口默认为80，所以通常这两项不用输入）。而跨域就是说去访问的网站信息中的协议、域名、端口号这三者之中任意一个与当前页面的UR
什么是跨域？跨域详解
weixin_44091311的博客
12-17 4788
一、为什么会出现跨域问题 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port） 二、什么是跨域 当一个请求url的协议、域名、端口三
什么是跨域？如何解决？
GSON的博客
11-01 3万+
一、什么是跨域？ 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！ 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域； 二、跨域访问示例 假设有两个网站，A网站部署在：.
什么是跨域，如何解决跨域（前后端）
jieyucx的博客
05-12 3628
跨域：指的是在网页端，发起一个跨越不同域名（协议、端口号）的HTTP请求的过程。例如：当一个页面的URL为http://a.com，通过Ajax向http://b.com发送请求，就是一个跨域请求。跨域问题是由浏览器的同源策略所引起的。同源策略限制了JS代码只能读取与其来源页面具有相同域名的数据。具体而言，同源策略是一种浏览器安全策略，它通过检查来源URL（协议 + 域名 +端口）是否与目标URL来源是否相同来决定是否允许跨域访问。同源策略主要限制以下四种行为。
什么是跨域？跨域解决方法
热门推荐
weixin_66375317的博客
05-02 9万+
什么是跨域？跨域解决方法
【附源码】解决pdf.js跨域并从url动态加载pdf文档
WCX_joker的博客
07-29 1万+
当我们想用PDF.js从URL加载文档时，将会因遇到跨域问题而中断，且是因为会触发了PDF.js和浏览器的双重CORS block，这篇文章将会介绍：①如何禁用pdf.js的跨域？②如何绕过浏览器的CORS加载URL文件？②如何使用PDF.js动态加载URL文件？.........
跨域解决方法之window.name
小白变怪兽
02-24 1万+
window.name 跨域请求 方法
JS跨域详解与解决方案
跨域问题需要结合具体的场景选择合适的解决方案。CORS是现代浏览器中广泛支持的标准，适用于大多数情况。其他如JSONP和代理服务器则适用于不支持CORS的旧版浏览器或特定需求。理解并正确使用这些跨域技术，对于构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值