【跨域请求（七）】CORS 跨资源共享《单向跨域》

最新推荐文章于 2023-03-22 23:07:59 发布
最新推荐文章于 2023-03-22 23:07:59 发布
阅读量162 收藏
点赞数
分类专栏： 跨域篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/110205074
版权
传送门：
1. JavaScript 教程 / 浏览器模型 / CORS 通信
2. CORS ajax跨域请求php简单完整案例一则
3. Content-Type 详解
4. OPTIONS预检请求

文章目录

一、简单请求

在这里插入图片描述

  • a.html（http://aaa.com/a.html）
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<input type="button" id="btn" value="点击获取随机图片" onclick="getRandomPic()" />
	<div class="demo"></div>
	<script>
		function getRandomPic() {
			// ajax 向同域后端文件发出请求，接收数据
			var xhr = new XMLHttpRequest();
			xhr.open('GET', 'http://bbb.com/b.php?random=' + Math.random(), true);
			xhr.onreadystatechange = function() {
				if (this.readyState === 4) {
					if ((this.status >= 200 && this.status < 300)
					|| (this.status === 304)) {
						var imgURL = this.responseText;
						document.querySelector('.demo').innerHTML =
						'<img src="' + imgURL + '" width=500 />';
					} else {
						console.log(new Error);
					}
				}
			};
			// 向服务器发出请求是否携带 Cookie（某些浏览器默认 false，某些则为 true）
			xhr.withCredentials = true;
				// 需要配合服务器设置 'Access-Control-Allow-Credentials: true' 字段
			xhr.send(null);
		}
	</script>
</body>
</html>
  • b.php（http://bbb.com/b.php）
<?php
	// 指定允许访问的域名(必需)
	header('Access-Control-Allow-Origin: http://aaa.com');
	
	// 指定允许响应的类型（可选，除去这三种之外的，都是非简单请求）
	header('Access-Control-Allow-Methods: POST, GET, HEAD');
	
	// 指定是否允许携带 Cookie 发送请求（可选，默认 false）
	header('Access-Control-Allow-Credentials: true');
		# 需要配合客服端的 XMLHttpRequest.withCredentials = true; 属性
	
	// 告知服务端以 HTML文档标记 格式处理请求数据
	header('Content-type: text/html; charset=utf-8');
	
	// 发送过来的随机数
	$random = $_GET['random'];

	// 输出一个带有随机参数的图片地址，防止地址被缓存而固定为一张图片
	echo 'https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture&random='.$random;
?>

二、非简单请求

1. OPTIONS 预检请求

模拟：ajax向服务器发送的请求中，携带 Content-Type 字段的类型为 application/json
【b.php 可空白，不进行任何处理，此处只是模拟预检请求】
在这里插入图片描述
这是由于 a.html 的 ajax 中设置了 xhr.setRequestHeader(‘Content-Type’, ‘application/json’); 浏览器将该请求识别为了非简单请求。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'http://bbb.com/b.php', true);
		xhr.setRequestHeader('Content-Type', 'application/json');
		xhr.send(null);
	</script>
</body>
</html>

2. 示例

  • a.html（http://aaa.com/a.html）
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// 转为JSON字符串(POST、GET请求会强制转换为字符串类型，这里需要处理下)
		var obj = JSON.stringify({
			name: '张三',
			age: 14,
			domain: 'http://aaa.com'
		});
		
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'http://bbb.com/bb.php', true);
		xhr.onreadystatechange = function() {
			if (this.readyState === 4) {
				if ((this.status >= 200 && this.status < 300)
				|| (this.status === 304)) {
					console.log(this.responseText);
				} else {
					console.log(new Error);
				}
			}
		};
		// 这是POST请求通常设置的字段信息(必需)
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// 注意，因为还需要再设置多一个字段，所以结尾不应该有分号
		
		// 向服务器发送json数据时需要设置的字段
		xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
			// 虽然也可以直接使用上面字段，但是设置本字段会触发"预检"OPTIONS请求
		
		// 或者写在一起，逗号隔开
		// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded, application/json; charset=utf-8');
		
		xhr.send('data=' + obj);
	</script>
</body>
</html>
  • b.php（http://bbb.com/b.php）
<?php
	// 指定允许访问的域名(必需)
	header('Access-Control-Allow-Origin: http://aaa.com');
	
	// 指定允许响应的类型(必需)
		# 为了避免多次“预检”请求，返回的是所有支持的方法
	header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD');
	
	// 表明服务器支持的所有头信息字段，不限于浏览器在“预检”中请求的字段(必需)
		# 对应在ajax中设置的setRequestHeader('Content-Type', ...);
	header('Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accept, X-Requested-With');	// 或者 *
	
	// 指定本次预检请求的有效期，单位为秒(可选)
	header('Access-Control-Max-Age: 1');
	
	// 处理传递过来的JSON字符串，转为PHP数组
	$json = json_decode($_POST['data'], true);
	
	echo 'Hello '.$json['name'].', 该消息来自: http://bbb.com';
?>
iuukai
关注
专栏目录
Vue聊聊跨域-模拟请求
Caeser110的博客
01-09 563
跨域 跨域资源共享，用于让网页的受限资源能够被其他域名的页面访问的一种机制。通过该机制，页面能够自由地使用不同域名的图片、样式、脚本、iframes以及视频。一些跨域的请求常常会被同源策略所禁止的 跨域资源共享是一份浏览器技术的规范，提供了Web 服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略。 为什么要跨域 因为现在的项目前后端进行分离，还有各种文件服务器数据库服务器可能会分开，还可能...
【JavaScript】跨源资源共享CORS和其他跨域技术（Comet、JSONP、SSE、Web Sockets）
季诗筱的博客
05-30 4463
通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下XHR对象只能访问与包含它的页面位于同一个域中的资源，这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求也是很重要的。一、CORS跨源资源共享CORS（Cross-Origin Resource Sharing），跨源资源共享，是W3C的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器该如何沟通。其背后的基本思想
模拟跨域请求
Java技术
03-22 1872
chrome浏览器F12调出开发者工具，在开发者工具界面如下： var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.xxx.com/api/action'); xhr.send(null); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); } ...
浏览器模拟跨域请求
zzdgtb的博客
04-02 998
打开谷歌浏览器访问任意网页按F12进入调试模式 在控制台输入 var token= "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJBY2NvdW50RGVsZXRlLEFjY291bnRJbnNlcnQsQWNjb3VudE1vZGlmeSxBY2NvdW50UXVlcnksRGF0YVNvdXJjZURlbGV0ZSxEYXRhU291cmNlTW9kaWZ5LERhdGFTb3VyY2VRdWVyeSxEYXRh...
模拟跨域请求，将跨域问题重现
JDS_DIJ的博客
09-01 1447
网关 跨域
JSONP跨域请求实例详解
10-22
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了浏览器的同源策略的例外，...然而，对于复杂的交互或需要POST请求的情况，XMLHttpRequest Level 2或CORS（Cross-Origin Resource Sharing）可能更为合适。
javascript跨域请求包装函数与用法示例
10-21
跨域请求通常可以通过JSONP（JSON with Padding）或CORS（跨源资源共享）等方式实现。在这里，我们通过一个包装函数来实现JSONP的请求方式。JSONP是利用`<script>`标签不受同源策略限制的原理来实现跨域通信的一种...
http-mocker:模拟本地请求或代理远程请求的工具。 支持GUI和跨域请求
05-17
http-mockjs 模拟本地请求或代理远程请求的工具。 它具有以下功能： 通过配置文件.httpmockrc.json或package.json文件中的httpmock字段模拟映射关系； 支持语法，灵活配置动态嘲笑者。 根据确定表达形式的URL。 基于 ，通过GUI管理配置文件以提高效率。 方便的初始化和GUI编辑体验。 支持跨域模拟和代理 支持js config的复杂规则。 支持按键和值类型验证正文。 安装 在项目目录下 npm install --save-dev http-mockjs 或全局安装 npm install -g http-mockjs 初始化配置文件 模拟过程是根据当前目录中的.httpmockrc.json文件进行的，因此更新程序需要生成默认配置文件： http-mockjs init 将在当前文件夹中生成一个配置文件.httpmockrc
模拟请求发生跨域问题
最新发布
pingfanblog
03-22 431
axios
本地使用浏览器模拟跨域请求
weixin_43316101的博客
05-09 2895
浏览器模拟跨域请求 随便写一个域名，然后在调试工具使用异步请求，保证请求的IP和域名不一致，即可实现跨域请求 js代码 var xhr = new XMLHttpRequest(); xhr.open('OPTIONS', 'http://127.0.0.1:8090/crossFilter'); xhr.send(); xhr.onload = function(e) { var xhr = e.target; console.log(xhr.responseText); } ...
模拟跨域请求-引入jasmine测试框架
泷泷养的乔小胖
12-04 491
引入jasmine测试框架 1、下载jasmine测试框架   http://jasmine.github.io   选择RELEASES版本 2、Spring Boot项目引入jasmine测试框架   把lib/jasmine-2.8.0引入到static目录下   把lib/jasmine-2.8.0引入到static目录下 3、index.htm...
CORS跨域资源共享(一)：模拟跨域请求以及结果分析，理解同源策略【享学Spring MVC】
架构师：通透，才能写出好代码！
09-20 3354
前言 在我们日常的项目开发时使用AJAX，传统的Ajax请求只能获取在同一个域名下面的资源，但是HTML5打破了这个限制，允许Ajax发起跨域的请求。浏览器是可以发起跨域请求的，比如你可以外链一个外域的图片或者脚本。但是Javascript脚本是不能获取这些资源的内容的，它只能被浏览器执行或渲染。主要原因还是出于安全考虑，浏览器会限制脚本中发起的跨站请求。(同源策略， 即JavaScript或Co...
FastAPI（38）- 模拟一个跨域场景
qq_33801641的博客
09-28 310
同源策略 https://www.cnblogs.com/poloyy/p/15345184.html CORS https://www.cnblogs.com/poloyy/p/15345871.html 需要先了解什么是同源策略和 CORS 才能更好看懂这篇文章 目录结构 — root/ | |—static/ | | | |—jquery.min.js | |— cors_c...
模拟jsonp跨域方法
EZ
10-23 1517
jsonp 跨域方法详解什么事跨域浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。- 协议名protocol - 主机host - 端口号port - 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。XMLHttpRequest 有跨域请求限制 不同域名，主机名会有跨域限制127.0.0.1 192.168.135.25
HTTP 1、http 跨域问题 Postman 模拟跨域
Mr-zhou先生
09-28 4658
http 跨域问题 Postman 模拟跨域
vue实现仿百度搜索效果-模拟跨域请求
JackieDYH的博客
06-03 547
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .select{ .
跨域总结：JavaScript实现数据交互的多种方式
1. **window.name**属性：这是一种基础且相对简单的跨域方式，适用于单向数据传递。开发者可以在一个页面（A）中创建一个`<iframe>`加载另一个域（B）的资源。在页面B中，通过设置`window.name`属性来传递数据，例如...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值