1. 跨域简单请求

需要在服务器响应头中加 Access-Control-Allow-Origin

2. 跨域复杂请求

这时候会发送预检请求options，服务器需要在响应头中添加Access-Control-Allow-Headers来表明支持的请求头

需要响应头

Access-Control-Allow-Headers
Access-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外的另一 ...

随机推荐

Windows server 2008 r2下安装sqlserver2012
在微软官网上下载sqlserver2012镜像文件:用Alcohol 120%软件进行驱动安装. 如果C盘的容量不够的话,上边的路径可以修改
Java volatile修饰字段
一.关键字volatile修饰字段: 使用特殊域变量(volatile)实现线程同步 volatile:不稳定的:反复无常的:易挥发的: 1.volatile关键字为域变量的访问提供了一种免锁机制, ...
爬虫入门-使用python写简单爬虫
从第一章到上一章为止,基本把python所有的基础点都已经包括了,我们有控制逻辑的关键字,有内置数据结构,有用于工程需要的函数和模块,又有了标准库和第三方库,可以写正规的程序了. python可以做非 ...
DJI大疆创新招聘-自动化测试工程师
工作地点:深圳简历发送:sue.li@dji.com 工作职责: 1. 参与自动化测试的设计和开发,参与需求分析和评审,评估合理性和完备性: 任职资格: 1. 本科及以上学历,计算机或软件工程相关专 ...
怎样解决使用feof（）函数时出现的问题？
feof函数昨天在做一个课程设计时,一个函数的功能是将文件中的数据一条条的读到链表中去.既然不确定有多少条数据,那只能借助feof()函数了,本来文件部分就没学好,也就知道这一个方法. ...
Vizceral小白入门
Vizceral小白入门接到一个任务,要求将N个program可视化,能一目了然查看当前爬虫状态.记得之前做测试时,一个queue service前端可视化效果不错,经询问是用vizceral开源框 ...
Mysql5.7.25安装步骤
安装步骤在官网下载mysql-5.7.25-winx64.zip压缩包到本地,解压到非中文目录. 列如(D:\Program Files\mysql-5.7.25-winx64). 在环境变量中添加 ...
python基础-基本概念
python概念介绍 python是一门动态解释型的强类型定义语言,创始人吉多·范罗苏姆(Guido van Rossum) #编译型语言编译型:一次性将所有程序编译成二进制文件缺点:开发效率低, ...
MySQL基础篇(05)：逻辑架构图解和InnoDB存储引擎详解
本文源码:GitHub·点这里 || GitEE·点这里一.MySQL逻辑架构 1.逻辑架构图基于下面的逻辑架构图,可以大致熟悉MySQL各个架构组件之间的协同工作关系. 很经典的C/S架构风格, ...

关于CORS(跨域资源共享)的几个http请求头小实验