关于跨域的理解

什么是跨域?
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域

主域名不同 http://www.baidu.com/index.html –>http://www.sina.com/index.js
子域名不同 http://www.tieba.baidu.com/index.html –>http://www.map.baidu.com/index.js
域名和域名ip http://www.baidu.com/index.html –>http://110.129.131.27/index.js
端口不同 http://www.baidu.com:8080/index.html–> http://www.baidu.com:8081/index.js
协议不同 http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/index.js

备注:
1、端口和协议的不同,只能通过后台来解决
2、localhost和127.0.0.1虽然都指向本机,但也属于跨域
3、同源策略是指,请求的url地址,必须与浏览器上的url地址处于同域上,即域名相同,端口相同,协议相同

如何解决跨域问题?

JSONP:
jsonp全称是json with padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的非官方跨域数据交互协议。
JSON、JSONP的区别:
1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)
2、JSONP 只支持get请求、不支持post请求(类似往页面添加一个script标签,通过src属性去触发对指定地址的请求,故只能是Get请求)
JSONP(JSON with Padding:填充式JSON),应用JSON的一种新方法

nginx反向代理:
www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口在后端去调用
www.sina.com/server.php并拿到返回值,然后再返回给index.html

PHP端修改header:
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

document.domain:
跨域分为两种,一种xhr不能访问不同源的文档,另一种是不同window之间不能进行交互操作;
document.domain主要是解决第二种情况,且只能适用于主域相同子域不同的情况;
document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

window.name:
关键点:window.name在页面的生命周期里共享一个window.name;
兼容性:所有浏览器都支持;
优点:
最简单的利用了浏览器的特性来做到不同域之间的数据传递;
不需要前端和后端的特殊配制;
缺点:
大小限制:window.name最大size是2M左右,不同浏览器中会有不同约定;
安全性:当前页面所有window都可以修改,很不安全;

原文地址:https://www.cnblogs.com/yuanjia2717/p/9893384.html

时间: 2025-01-05 04:25:53

关于跨域的理解的相关文章

同源策略和跨域的理解

1.同源策略 同源策略的出现,是为了维护web届各种源(dom等资源)的和平,限制某脚本访问其他域的脚本资源. 比如,一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码. 同源概念:        URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 如http://www.depycode.com 与http://depycode.com 就

前端跨域深入理解

p.p1 { margin: 0.0px 0.0px 12.8px 0.0px; line-height: 18.0px; font: 19.2px "PT Sans"; color: #000000 } p.p2 { margin: 0.0px 0.0px 14.4px 0.0px; line-height: 18.0px; font: 14.4px "PT Sans"; color: #000000 } p.p3 { margin: 0.0px 0.0px 12

跨域的理解与实现

什么是跨域 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理. 有一种简明的说法来解释广域跨域:跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默

跨域请求理解及原理

跨域实现的过程大致如下: 1   从 http://www.a.com/test.html 发起一个跨域请求, 请求的地址为: http://www.b.com/test.php 2   如果 服务器B返回一个如下的header Access-Control-Allow-Origin: http://www.a.com 那么,这个来自 http://www.a.com/test.html 的跨域请求就会被通过. 在这个过程中, request 还会带上这个header: Origin: http

理解跨域

整理一下自己这段时间对于跨域的理解和学习: 先来张图,一图解百忧 [原因]Javascript出于安全方面的考虑,不允许跨域调用其他页面的对象.什么是跨域呢,简单地理解就是因为Javascript同源策略的限制,a.com域名下的js无法操作b.com或是c.com域名下的对象 来点栗子,来加深点感觉: (http://)www.abc.com/index.html 调用 www.abc.com/service.php(非跨域) (http://)www.abc.com/index.html 调

快速入门各种跨域

前言因为学习跨域需要配置本地服务器,可能会比较麻烦,所以自己根据网上的博客写了大多数跨域的简单demo,可以自己在`本地运行`,而且`不用配置服务器`.自己对于跨域的理解刚开始也仅仅在于网上的博客文章,通过写这些可以本地运行的demo让我对跨域有了更直面的理解,希望这些demo对你们有帮助,有错误的话欢迎指正,欢迎PR. github地址: https://github.com/FatDong1/cross-domain 多种跨域demo CROS跨域 JSONP跨域 postMessage跨域

ajax跨域请求 小栗子 jsonP

跨域简单理解就是跨服务调用方法 一个常见的ajax模板  前台jsp 后台接受请求 运行结果 结局方法 返回成功 本栗子楼主按视频教程截图........

Ajax和跨域

1.Ajax 全称asynchronous(异步的)JavaScript and XML,是一种无需加载网页而更新网页部分内容的技术. 同步:客户端发起请求,然后客户端一直等待服务器端处理,收到服务器端响应后,客户端重新载入整个页面,如果有错误客户端再次发起请求-- 异步:客户端发起请求,服务器端处理的同时客户端可以继续运行,没有等待,服务器端的响应会实时反馈给客户端. 步骤: 运用XMLHttpRequset对象和web服务器进行数据的异步交换: 运用JS操作DOM实现动态局部刷新. 语法:

AJAX跨域完全讲解

AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候知道了为什么会存在跨域,以及跨域解决的方案有哪些,今天随着课程的学习,又加深了AJAX跨域的理解,以此记录下来. 为什么会发生产生跨域问题? 上面的图也很清晰了,因为浏览器为了安全(同源),本身就限制了. 当我们发送XMLHttpRequest请求的时候,如果请求的是别的域(主机域名.端口)不同时,