跨域问题与解决方案
跨域问题与解决方案
每日更新前端基础,如果觉得不错,点个star吧 ? https://github.com/WindrunnerMax/EveryDay
制定HTML规则时,出于安全的考虑,一个源的网站不允许与另一个源的资源进行交互,浏览器制定此规则为同源策略
同源即指的网站具有相同的域,即 协议(protocol)、主机(host)、端口号(port) 相同
跨域资源嵌入是允许的,但是浏览器限制了Javascript不能与加载的内容进行交互,如嵌入的<script>、<img>、<link>、<iframe>
等。
受限的场景
XHR请求不能发送 无法对跨域请求的资源进行修改 不同源的Cookie、LocalStorage无法读取
跨域解决方案
JSONP跨域请求数据
由于<script>
可以对跨域资源进行请求,于是可以对DOM
动态地append
一个<script>
并添加src
且携带一个callback
函数名,待请求完成后调用callback
//前端
function jsonpHandle(data){console.log(data);} //首先定义函数,请求完成后会携带参数调用函数
var url = "http://127.0.0.1/test.php?callback=jsonpHandle";
var obj = $('<script></script>');
obj.attr("src",url);
$("body").append(obj); // 动态地添加一个script
// 后端配合实现
$data = ["a" => 1, "b" => 2];
$callback = $_GET['callback'];
return $callback."(".json_encode($data).")";
CORS跨域
对于简单请求,浏览器会直接发送CORS
请求,具体说来就是在header
中加入origin
请求头字段。同样,在响应头中,返回服务器设置的相关CORS
头部字段,Access-Control-Allow-Origin
字段为允许跨域请求的源。请求时浏览器在请求头的Origin
中说明请求的源,服务器收到后发现允许该源跨域请求,则会成功返回。
对于非简单请求,浏览器会自动先发送一个options
请求,如果发现服务器支持该请求,则会将真正的请求发送到后端,反之,如果浏览器发现服务端并不支持该请求,则会在控制台抛出错误。
//响应头 Response Headers
header('Content-Type: text/html;charset=utf-8');
header('Access-Control-Allow-Origin:http://localhost:8080'); // *代表允许任何网址请求
header('Access-Control-Allow-Methods:POST,GET'); // 允许请求的类型
header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies
header('Access-Control-Allow-Headers: Content-Type,Origin,Refer'); // 允许自定义请求头的字段
Nginx代理
通过代理的手段,监听同一端口添加不同路径实现不同服务的跨域访问
location /test
{
proxy_pass http://127.0.0.1:81;
}
图片ping
直接新建一个<img>
,然后在地址中存放一些简单数据,这种方法只支持get
请求,且只能单向地向服务器发送请求,在统计广告曝光次数中比较常见,XSS
攻击也常用其获取cookie
。
<img src="http://127.0.0.1?key=value">
相同主域document.domain
例如对于www.example.com
与abc.example.com
,其主域名是一样的
document.domain = "example.com"; //相同主域
var ifrWin = document.getElementById("ifr").contentWindow; //可以操作iframe
window.name共享数据
不同域的iframe
把共享的信息放在window.name
里面,此方法只适用于两个iframe
之间的跨域
window.name = JSON.stringify({"a":1,"b":2})
window.postMessage
使用window.postMessage
来向其它的window
对象发送消息,无论这个window对象是属于同源或不同源.这种方法不能和服务端交换数据
//主window
window.frames[0].postMessage({"a":1},"http://127.0.0.1:81")
//iframe //出于安全考虑验证来源
window.addEventListener('message',(event)=>{
if(event.origin === "http://127.0.0.1") console.log(event.data);
});
- 常见端口转发工具的使用方式(二)
- 如何在CDH启用Kerberos的情况下安装及使用Sentry(一)
- 打造炫酷的通知插件EasyToaster
- 世界智能驾驶挑战赛信息安全组——新人扫盲
- 如何在CDH启用Kerberos的情况下安装及使用Sentry(二)
- 如何用 vue 制作一个探探滑动组件
- 常见端口转发工具的使用方式
- Ubuntu on Windows10 跨平台开发环境搭建权威指南
- 如何实现CDH元数据库MySQL的主备
- 通过Java程序提交通用Mapreduce无法回收类的问题
- 如何在CDH未启用认证的情况下安装及使用Sentry
- 小白也能玩转无线安全(一)——硬件&工具入门篇
- python多线程例子
- LCTF “他们有什么秘密呢? ”详细解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- asterisk服务器的sip、iax2中继对接 By HKL,
- 用Windows10自带PowerShell获取文件Hash(MD5、SHA1/256)值得方法 By H
- 移除Blog对jQuery的依赖 By HKL, Tues
- 通过expect脚本在H3C设备批量执行命令 By HKL,
- 使用python的paramiko加flask模块实现H3C设备实时ssh信息查询 By HKL,
- MotherBoard JCOM to DB9 female By HKL,
- PHP实现根据请求的域名跳转到不同目录 By HKL, T
- frp定时监控脚本 By HKL, Tuesday 13
- iptables上入站流量同时启用DNAT和SNAT By HKL,
- tasker调用钉钉机器人实现短信转钉钉 By HKL,
- EdgeCore AS6700 ONIE Firmware固件 For HWr01c By HKL,
- sddm启动root登陆kde By HKL, Tuesd
- ELK收集处理Huawei/H3C交换机日志 By HKL,
- UniFi Register Device with keadhcp By HKL,
- Huawei esight to 钉钉dingding (RESTful API) By HKL,