关于CORS(跨域资源共享)的几个http请求头小实验
对几种与跨域相关的请求头做一个总结
关于跨域可以看：9 种常见的前端跨域解决方案（详解）
看完后可以配合我的代码做些实验，看看注释掉某个响应头会发生什么，整体代码会在最后贴出
1. 跨域简单请求
需要在服务器响应头中加 Access-Control-Allow-Origin
2. 跨域复杂请求
这时候会发送预检请求options，服务器需要在响应头中添加Access-Control-Allow-Headers来表明支持的请求头
需要响应头
Access-Control-Allow-HeadersAccess-Control-Allow-Origin
响应头中 Access-Control-Allow-Headers 的值应该设置为是使简单请求变成非简单请求的请求头，有多个时则以逗号相连（当然，也可以设置为*）。在这里，因为发请求的时候我设置了
headers: {
"content-type": "application/json" //设置这个后，就不是简单跨域请求了
},
所以 Access-Control-Allow-Headers 响应头中至少要有 content-type
不加
Access-Control-Allow-Headers则浏览器提示
Access to XMLHttpRequest at 'http://localhost:3333/test3' from origin 'http://localhost:2222' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
3. 跨域复杂请求,带 cookie
需要响应头
Access-Control-Allow-Headers，并且不能为 *Access-Control-Allow-Origin，并且不能为 *Access-Control-Allow-Credentials为 true
4. 代码
分了三个文件
4.1. test.html
在这里发送 ajax 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button type="button" id="test1">不跨域请求</button>
<button type="button" id="test2">跨域简单请求</button>
<button type="button" id="test3">跨域复杂请求</button>
<button type="button" id="test4">跨域复杂请求，带cookie</button>
<!-- <button type="button" id="test">测试</button> -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
var test1 = document.querySelector("#test1");
//不跨域请求
test1.addEventListener(
"click",
function() {
var url = `/test1`;
$.ajax({
url: url,
type: "get",
data: {
test: "test1"
},
success(res) {
var modal = `<div>不跨域请求成功:${res}</div>`;
$("body").append(modal); //htmlEscape()对字符进行转义，js不会被执行，而是作为字符串
}
});
},
false
);
//跨域简单请求
var test2 = document.querySelector("#test2");
test2.addEventListener(
"click",
function() {
var url = `http://localhost:3333/test2`;
$.ajax({
url: url,
type: "post",
data: {
test: "test2"
},
success(res) {
var modal = `<div>跨域简单请求成功:${res}</div>`;
$("body").append(modal); //htmlEscape()对字符进行转义，js不会被执行，而是作为字符串
}
});
},
false
);
// 跨域复杂请求
var test3 = document.querySelector("#test3");
test3.addEventListener(
"click",
function() {
var url = `http://localhost:3333/test3`;
$.ajax({
url: url,
type: "post",
headers: {
"content-type": "application/json" //设置这个后，就不是简单跨域请求了
},
data: {
test: "test3"
},
success(res) {
var modal = `<div>跨域复杂请求成功:${res}</div>`;
$("body").append(modal); //htmlEscape()对字符进行转义，js不会被执行，而是作为字符串
}
});
},
false
);
// 带cookie的跨域请求
var test4 = document.querySelector("#test4");
test4.addEventListener(
"click",
function() {
var url = `http://localhost:3333/test4`;
$.ajax({
url: url,
type: "post",
headers: {
"content-type": "application/json" //设置这个后，就不是简单跨域请求了
},
xhrFields: {
withCredentials: true // 前端设置是否带cookie
},
data: {
test: "test4"
},
success(res) {
var modal = `<div>带cookie的跨域请求成功:${res}</div>`;
$("body").append(modal); //htmlEscape()对字符进行转义，js不会被执行，而是作为字符串
}
});
},
false
);
</script>
</body>
</html>
4.2. server.js
负责返回 test.html 和提供不跨域请求的接口
const fs = require("fs");
const http = require("http");
const qs = require("querystring");
const path = require("path");
http
.createServer((req, res) => {
let html = fs.readFileSync(path.resolve(__dirname, "./test.html"));
const url = req.url.split("?")[0];
const query = req.url.split("?")[1];
req.on("data", function(data1) {
postData += data1;
});
console.log("收到来自 ", url);
if (req.method == "GET") {
if (url == "/") {
//返回html模板
res.setHeader("set-cookie", "testCORS=riwang"); //设置cookie，后面发送带cookie的请求时使用
res.end(html);
} else if (url == "/test1") {
//不跨域请求
res.end(query);
}
}
})
.listen(2222);
4.3. api.js
负责提供跨域请求的接口
/*
* @Author: riwang
* @Date: 2020-03-23 23:30:59
* @LastEditTime: 2020-03-24 00:49:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \RW 笔记\web安全\跨域\code\api.js
*/
const fs = require("fs");
const http = require("http");
const qs = require("querystring");
const path = require("path");
http
.createServer((req, res) => {
let html = fs.readFileSync(path.resolve(__dirname, "./test.html"));
const url = req.url.split("?")[0];
const query = req.url.split("?")[1];
const cookies = req.headers.cookie;
var postData = "";
req.on("data", function(data1) {
postData += data1;
});
console.log("收到来自 ", url);
if (req.method == "GET") {
res.end(html);
} else {
res.setHeader("set-cookie", "testCORS");
//跨域简单请求
if (url == "/test2") {
res.setHeader("Access-Control-Allow-Origin", "*");
req.on("end", function() {
res.end(postData);
});
}
if (url == "/test3") {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "*");
req.on("end", function() {
res.end(postData);
});
}
if (url == "/test4") {
res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
res.setHeader("Access-Control-Allow-Headers", "content-type"); //这里设置为*浏览器会报错
res.setHeader("Access-Control-Allow-Credentials", true);
req.on("end", function() {
res.end(`postBody是${postData} |||||| cookies是${cookies}`);
});
}
}
})
.listen(3333);
关于CORS(跨域资源共享)的几个http请求头小实验的更多相关文章
- CORS跨域资源共享
CORS(跨域资源共享)跨域问题及解决 当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Co ...
- CORS跨域资源共享你该知道的事儿
"唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共 ...
- 在ASP.NET Web API中实现CORS(跨域资源共享)
默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- 跨域漏洞丨JSONP和CORS跨域资源共享
进入正文之前,我们先来解决个小问题,什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 跨域常见的两种方式,分别是JSONP和CORS. 今天i ...
- CORS跨域资源共享总结
1.CORS简述 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源(协议 + 域名 + 端口)服务 ...
- Nginx CORS 跨域资源共享问题
## 背景 新项目上线,前后端分离,遇到了跨域资源共享的问题,导致请求根本无法发送到后端,前端和后端貌似只能有一个来处理跨域问题,我们这边要采用nginx来解决跨域问题. ## Nginx的CORS配 ...
- 浅谈跨域问题，CORS跨域资源共享
1,何为跨域? 在理解跨域问题之前,你先要了解同源策略和URL,简单叙述: 1)同源策略 三同:协议相同,域名相同,端口相同: 目的:保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则co ...
- Node.js实现CORS跨域资源共享
什么是CORS CORS(Cross-origin resource sharing),跨域资源共享,是一份浏览器技术的规范,用来避开浏览器的同源策略 简单来说就是解决跨域问题的除了jsonp外的另一 ...
随机推荐
- paxos算法学习总结
核心思想 分布式系统架构下如何让整体尽快达成一致观点,也就是多个不同观点收敛到一个观点的过程. 难点 可能会发生少数节点故障,但绝不是大面积故障,不然系统也没法正常工作. 由于存在单点故障,因此不可能 ...
- MySQL5.6 数据库主从（Master/Slave）同步安装与配置详解
.安装环境 .基本环境配置 .Master的配置 .Slave的配置 .添加需要同步的从库Slave .真正的测试 安装环境 1 操作系统 :CentOS 6.5 2 数据库版本:MySQL 5.6. ...
- 记录R的一些黑魔法
通路富集结果可视化 12345678 pathway<-read.table("PTC+_transcript_pep_supp_KEGG.txt",header=T,sep ...
- Ubuntu18.04下安装mysql5.7超详细步骤
1.首先执行下面三条命令: #安装mysql服务 sudo apt-get install mysql-server #安装客户端 sudo apt install mysql-client #安装依 ...
- swoole(2)swoole进程结构
一:进程基本概念 系统中正在运行的一个程序,程序一旦运行就是进程 一个进程可以拥有多个线程 核心内容分为两部分:内存(进程创建时从系统分配的,它所创建的变量都会存储在这一块内存中).上下文环境 二:s ...
- LeetCode---二叉树3-总结例题
二叉树-总结例题 1-从中序与后序遍历序列构造二叉树 给定二叉树的后序遍历和二叉树的中序遍历 想法: 先根据后序遍历的最后一个元素构造根节点 寻找根节点在中序遍历中的位置 递归构建根节点的左右子树 / ...
- iOS开发线程同步技术-锁
概览 1,什么是锁(临界区)? 2,常用的锁有哪些? 3,相关链接 什么是锁(临界区) 临界区:指的是一块对公共资源进行访问的代码,并非一种机制或是算法. 常用的锁有哪些? 互斥锁:是一种用于多线程编 ...
- 使用 Hexo 创建项目文档网站
当我们发布一个开源项目的时候,最重要的事情之一就是要创建项目文档.对使用项目的用户来说,文档是非常有必要的,通常我们可以使用下面这些方式来创建文档: GitHub Wiki:在 Github 上我们可 ...
- 前端每日实战：151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 我厌倦了 Redux，那就造个轮子 Rectx：第三集
仓库:215566435/rectx 前言 麻烦快去我的仓库里面喷: 老子学不动了,求不要更新. 呵呵,你没想到吧,这玩意儿竟然有第三集!我靠,我自己都没想到,让我们悄悄的回顾一下前两集完全没想到,竟 ...