IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> 跨域系列问题及解决方案总结 -> 正文阅读

[PHP知识库]跨域系列问题及解决方案总结

- 什么是跨域?

浏览器的非同源为跨域。即两个页面拥有不同的协议(protocol)或端口(port)或主机(host)

- 为什么会出现跨域问题?

出于浏览器的同源策略限制,浏览器会拒绝跨域请求。
*注:严格的说,浏览器并不是拒绝所有的跨域请求,实际上拒绝的是跨域的读操作。浏览器的同源限制策略是这样执行的:

通常浏览器允许进行跨域写操作(Cross-origin writes),如链接,重定向;
通常浏览器允许跨域资源嵌入(Cross-origin embedding),如 img、script 标签;
通常浏览器不允许跨域读操作(Cross-origin reads)。*

- 为什么有跨域需求?

工程服务化后,不同职责的服务分散在不同的工程中,往往这些工程的域名是不同的,但一个需求可能需要对应到多个服务,这时便需要调用不同服务的接口,因此会出现跨域。

- 解决跨域方法

通常,最常用的跨域方式有以下三种:JSONP、CORS、postMessage。

1.、JSONP

核心思想:因此网页通过<script>向服务器请求JSON数据,服务器在收到请求后将数据放在指定名字的回调中返回。(刚刚说了不能通过XMLHttpRequest请求不同域上的数据(Cross-origin reads)。但是,在页面上引入不同域上的js脚本文件却是可以的(Cross-origin embedding)。
实现方式(需前后端配合)

<script type="text/javascript">
    function dosomething(data){
        //处理获得的数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>
<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

【JSONP的优缺点】
优点:兼容性好(兼容低版本IE)
缺点:1.JSONP只支持GET请求; 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制

2、CORS

CORS 是W3C 推荐的一种新的官方方案,能使服务器支持 XMLHttpRequest 的跨域请求。CORS 实现起来非常方便,只需要增加一些 HTTP 头,让服务器能声明允许的访问来源。
通常使用CORS时,异步请求会被分为简单请求和非简单请求,非简单请求的区别是会先发一次预检请求。

  • 【简单请求】
GET
HEAD
POST- 仅当POST方法的Content-Type值等于下列之一才算作简单请求
       - text/plain
       - multipart/form-data
       - application/x-www-form-urlencoded

Origin: foo.example 表明该请求来源于 foo.exmaple。
Access-Control-Allow-Origin: * 表明该资源可以被任意外域访问。
【非简单请求】

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH
  • 预请求:
Access-Control-Request-Method: POST 告诉服务器,之后的实际 请求按照POST方式
Access-Control-Request-Headers: X-PINGOTHER   Content-Type告诉服务器,实际请求将携带两个自定义的请求首部字段 ,服务器据此决定是否被允许
  • 预请求响应
Access-Control-Allow-Origin: foo.example    // 标识可接受的跨域请求源; 
Access-Control-Allow-Methods: POST, GET, OPTIONS   //标识可接受的跨域请求方法, Access-Control-Allow-Headers: X-PINGOTHER, Content-Type //标识可接受的跨域请求自定义头;  
Access-Control-Max-Age: 86400//标识本次预请求的有效时间(秒),期间内无需再发送预请求;
带有带HTTP Cookies 和验证信息的跨域请求

通常不会跨域,但也有一些情况需要打通不同的登录态,需要设置 XMLHttpRequest 的某个特殊标志位。比如下面代码,可以把 XMLHttpRequest 的 withCredentials 设置为 true,这样浏览器就能跨域发送凭证信息。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

3、postMessage

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

otherWindow.postMessage(message, targetOrigin, [transfer]);

本文参考 https://juejin.cn/post/6844903496521613320

  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞(CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行,多个线程依次执行,多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2022-01-16 12:49:24  更:2022-01-16 12:49:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 14:36:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码