虚拟主机3种方式nginx/apache+跨域知识点整理

news2025/2/25 10:45:19

目录

  • referer、prototype、array、json笔记整理: [http://t.csdn.cn/s4P8x](http://t.csdn.cn/s4P8x)
  • 虚拟主机3种方式nginx/apache+跨域知识点整理
    • 一、Apache基于多IP、多端口、多域名访问
      • 1、添加网卡三种方法
        • 1、虚拟机添加网络适配器
        • 2、命令添加
        • 3、用nmtui 添加ip地址
      • 2、添加配置文件、本地域名解析
      • 3、创建所需目录文件内容
      • 4、关闭防火墙、开启httpd服务
      • 5、curl 测试,浏览器测试
    • 二、nginx基于多IP、多端口、多域名访问
      • 1、添加配置文件
      • 2、创建所需目录文件内容
      • 3、curl 测试,浏览器测试
    • 二、跨域知识点整理
      • 1、降域
      • 2、hash
      • 3、window.name
      • 4、postMessage
      • 5、jsonp 直接淘汰
      • 6、websocket
      • 7、cors *
        • 1、两种请求
        • 2、与 JSONP 的比较

referer、prototype、array、json笔记整理: http://t.csdn.cn/s4P8x

虚拟主机3种方式nginx/apache+跨域知识点整理

一、Apache基于多IP、多端口、多域名访问

1、添加网卡三种方法

1、虚拟机添加网络适配器

在这里插入图片描述

2、命令添加

设置两个端口

1.nmcli connection add con-name ens37 ifname ens37 type ethernet 
2.nmcli connection add con-name ens38 ifname ens38 type ethernet

配地址

1.nmcli connection modify ens37 ipv4.addresses 192.168.137.136/24  ipv4.dns 192.168.137.2 ipv4.gateway 192.168.137.2 ipv4.method manual autoconnect yes
2.nmcli connection modify ens38 ipv4.addresses 192.168.137.137/24  ipv4.dns 192.168.137.2 ipv4.gateway 192.168.137.2 ipv4.method manual autoconnect yes

up一下网卡
nmcli connection up ens37/38

3、用nmtui 添加ip地址

输入nmtui进入会话
在Add后面添加IP,然后一直回车
在这里插入图片描述

2、添加配置文件、本地域名解析

添加配置文件
cd /etc/httpd/conf.d
在这里插入图片描述
添加配置文件,可以去主配置文件/etc/httpd/conf/httpd.conf复制粘贴

# 131
<VirtualHost 192.168.137.131>
        DocumentRoot /var/www/html/131
        ServerName 192.168.137.131
</VirtualHost>
# 136
<VirtualHost 192.168.137.136>
        DocumentRoot /var/www/html/136
        ServerName 192.168.137.136
</VirtualHost>
# 137
<VirtualHost 192.168.137.137>
        DocumentRoot /var/www/html/137
        ServerName 192.168.137.137
</VirtualHost>
# port:100
Listen 100
<VirtualHost 192.168.137.131:100>
        DocumentRoot /var/www/html/100
        ServerName 192.168.137.131
</VirtualHost>
# port:200
Listen 200
<VirtualHost 192.168.137.131:200>
        DocumentRoot /var/www/html/200
        ServerName 192.168.137.131
</VirtualHost>
# www.xixi.com
<VirtualHost www.xixi.com>
        DocumentRoot /var/www/html/xixi
        ServerName www.xixi.com
</VirtualHost>
# www.haha.com
<VirtualHost www.haha.com>
        DocumentRoot /var/www/html/haha
        ServerName www.haha.com
</VirtualHost>
<Directory "/var/www/html">
        AllowOverride None
        #Allow open access:
        Require all granted
</Directory>

在这里插入图片描述
在这里插入图片描述
本地域名解析
linux本地解析
在这里插入图片描述
windows 本地域名解析
在这里插入图片描述

3、创建所需目录文件内容

在这里插入图片描述
在这里插入图片描述

4、关闭防火墙、开启httpd服务

在这里插入图片描述

5、curl 测试,浏览器测试

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

二、nginx基于多IP、多端口、多域名访问

1、添加配置文件

# 131
server {
    listen 80;
    server_name 192.168.137.131;
    location / {
        root /usr/local/nginx/html/136;
        index index.html;
    }
}
# 136
server {
    listen 80;
    server_name 192.168.137.136;
    location / {
        root /usr/local/nginx/html/136;
        index index.html;
    }
}
# 137
server {
    listen 80;
    server_name 192.168.137.137;
    location / {
        root /usr/local/nginx/html/137;
        index index.html;
    }
}
# port:100
server {
    listen 100;
    server_name 192.168.137.131;
    location / {
        root /usr/local/nginx/html/100;
        index index.html;
    }
}
# port:200
server {
    listen 200;
    server_name 192.168.137.131;
    location / {
        root /usr/local/nginx/html/200;
        index index.html;
    }
}
# www.xixi.com
server {
    listen 80;
    server_name www.xixi.com;
    location / {
        root /usr/local/nginx/html/xixi;
        index index.html;
    }
}
# www.haha.com
server {
    listen 80;
    server_name www.haha.com;
    location / {
        root /usr/local/nginx/html/haha;
        index index.html;
    }
}

2、创建所需目录文件内容

在这里插入图片描述

3、curl 测试,浏览器测试

在这里插入图片描述
在这里插入图片描述

二、跨域知识点整理

1、降域

对于主域相同而子域不同的情况下,可以通过设置 document.domain 的办法来解决。

#master
<iframe id="iFrame" src="http://slave.security.com"></iframe>
<script>
document.domain = 'security.com';
    let ifr = document.getElementById('iFrame'); //通过id抓取iframe
    ifr.onload = function () {
        let win = ifr.contentWindow; 
        console.info(win);
        alert(win.data);
    }
</script>
contentWindow 属性返回当前 HTMLIFrameElement 的 Window 对象。 你可以使用这个 Window 对象去访问这个 iframe 的文档和它内部的 DOM.
#slave
<script>
    document.domain = 'security.com';
    window.data = 'data:111';
</script>

在这里插入图片描述

2、hash

在url中,file:///D:/security/phpstudy_pro/WWW/iframe/1.html#12345的#12345就是location.hash,改变hash值不会导致页面刷新,所以可以利用hash值来进行数据的传递,当然数据量是有限的。
在这里插入图片描述

#cs1
<script>
    // http://localhost:8080/cs1.html
    let ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = "http://localhost:8081/cs2.html#data";
    document.body.appendChild(ifr);
        
    function checkHash() {
        try {
        let data = location.hash ? location.hash.substring(1) : ' ';
        console.log('获得到的数据是:', data);
        }catch(e) {

        }
    }
    window.addEventListener('hashchange', function(e) {
        console.log('获得的数据是:', location.hash.substring(1));
        });
    </script>
#cs2
</head>
<body>
    <script>
    // http://locahost:8081/cs2.html
    switch(location.hash) {
        case "#data":
        callback();
        break;
    }
    function callback() {
    const data = "some number: 1111"
    try {
        parent.location.hash = data;
    }catch(e) {
        // ie, chrome 下的安全机制无法修改 parent.location.hash
        // 所以要利用一个中间的代理 iframe 
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://localhost:8080/cs3.html#' + data;     // 该文件在请求域名的域下
        document.body.appendChild(ifrproxy);
        }
       }
    </script>
</body>
</html>
#cs3
<script>
    parent.parent.location.hash = self.location.hash.substring(1)
</script>

在这里插入图片描述

3、window.name

window.name(一般在js代码里出现)的值不是一个普通的全局变量,而是当前窗口的名字,要注意的是每个iframe都有包裹它的window,而这个window是top window的子窗口,而它自然也有window.name的属性,window.name属性的神奇之处在于name值在不同的页面(甚至不同域名)加载后依旧存在(如果没有修改则值不会变化),并且可以支持非常长的name值
在这里插入图片描述
举个简单的例子:你在某个页面的控制台输入:

window.name = "hello world"
window.location = "http://www.baidu.com"

页面跳转到了百度首页,但是window.name却被保存下来了,还是hello world。

在这里插入图片描述

4、postMessage

postMessage 是 HTML5 新增加的一项功能,跨文档消息传输(Cross Document Messaging),目前:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能。
首先创建 a.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
    <iframe src="http://localhost:8081/b.html" style='display: none;'></iframe>
    <script>
    window.onload = function() {
        let targetOrigin = 'http://localhost:8081';
      //想要操作当前iframe的时候,就像该ifranme中postMessage()一个东西。
        window.frames[0].postMessage('我要给你发消息了!', targetOrigin);
        //*表示任何域都可以监听。
    }
      //当我监听到message事件的时候,我就知道有人向我发送数据了,我获得了数据就可以做对应的事情。内部对消息做实现
    window.addEventListener('message', function(e) {
        console.log('a.html 接收到的消息:', e.data);
    });
    </script>
</body>
</html>

创建一个 iframe,使用 iframe 的一个方法 postMessage 可以向http://localhost:8081/b.html发送消息,然后监听 message,可以获得其他文档发来的消息。
同样的 b.html 文件:

<script> 
window.addEventListener('message', function(e) { 
    if(e.source != window.parent) { 
        return; 
    } 
    let data = e.data;
    console.log('b.html 接收到的消息:', data); 
    parent.postMessage('我已经接收到消息了!', e.origin); 
})
</script>

在这里插入图片描述

5、jsonp 直接淘汰

1.优点
	1.1 JSONP可以跨越同源策略;
	1.2它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持
	1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据,至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据,你们只需要有不同的渲染逻辑就可以了,逻辑都可以使用同 一个jsonp服务。
2.缺点
	2.1它只支持GET请求而不支持POST等其它类型的HTTP请求
	2.2它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
	2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
	2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞,即它返回的javascript的内容被人控制的。那么结果是什么?所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

6、websocket

WebSocket 是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。

下面是一个例子,浏览器发出的 WebSocket 请求的头信息

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

上面代码中,有一个字段是Origin,表示该请求的请求源(origin),即发自哪个域名。

正是因为有了Origin这个字段,所以 WebSocket 才没有实行同源政策。因为服务器可以根据这个字段,判断是否许可本次通信。如果该域名在白名单内,服务器就会做出如下回应。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

7、cors *

CORS 是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。相比 JSONP 只能发GET请求,CORS 允许任何类型的请求。

整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。浏览器一旦发现 AJAX 请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感知。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨域通信。

1、两种请求

CORS 请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

只要同时满足以下两大条件,就属于简单请求。

(1)请求方法是以下三种方法之一。

  • HEAD
  • GET
  • POST

(2)HTTP 的头信息不超出以下几种字段。

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencodedmultipart/form-datatext/plain

凡是不同时满足上面两个条件,就属于非简单请求。一句话,简单请求就是简单的 HTTP 方法与简单的 HTTP 头信息的结合

在这里插入图片描述
如果Origin指定的源,不在许可范围内,服务器会返回一个正常的 HTTP 回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequestonerror回调函数捕获。注意,这种错误无法通过状态码识别,因为 HTTP 回应的状态码有可能是200。

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息之中,有三个与 CORS 请求相关的字段,都以Access-Control-开头。

(1)Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

(2)Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值,表示是否允许发送 Cookie。默认情况下,Cookie 不包括在 CORS 请求之中。设为true,即表示服务器明确许可,浏览器可以把 Cookie 包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送 Cookie,不发送该字段即可。

(3)Access-Control-Expose-Headers

该字段可选。CORS 请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个服务器返回的基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。

2、与 JSONP 的比较

CORS 与 JSONP 的使用目的相同,但是比 JSONP 更强大。JSONP 只支持GET请求,CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/151559.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Jwt 最流行的跨域身份验证解决方案

1. 什么是JWT JSON Web Token (JWT)是一个开放标准(RFC 7519)&#xff0c;它定义了一种紧凑的、自包含的方式&#xff0c;用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任&#xff0c;因为它是数字签名的。 JWT被设计为紧凑且安全的&#xff0c;特别适用于分…

Python制做一个电脑通知小工具,再也不怕忘记事情拉~

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ Windows不是有个消息通知功能&#xff0c;挺喜欢这个功能的&#xff0c; 但是不太方便使用&#xff0c;也懒得去研究&#xff0c; 于是准备用Python自己写一个&#xff0c;通过设定通知的间隔时…

Pikachu靶场暴力破解通关

目录 字典获取 BP四种攻击模式 一、Sniper(狙击手模式) 二、Battering ram(攻城锤模式) 三、Pitchfork(叉子模式) 四、Cluster bomb(炸弹模式) 靶场练习 基于表单的暴力破解 验证码绕过(on server) 验证码绕过(on client) token防爆破? 字典获取 在github里找到心…

公司注册商标的流程是什么

公司商标注册流程是什么? 1、商标查询。查询有关商标登记注册情况&#xff0c;以了解自己准备申请注册的商标是否与他人已经注册或正在注册的商标相同或近似的程序; 2、申请文件准备。商标注册申请书;)商标图样;申请注册集体商标、证明商标的&#xff0c;应当提交申请人主体资…

发布了一个jar包到中央仓库,我的心好累…

原创&#xff1a;微信公众号 码农参上&#xff0c;欢迎分享&#xff0c;转载请保留出处。 哈喽大家好啊&#xff0c;我是Hydra。 前几天我在网上冲浪的时候&#xff0c;看见有一个老铁在git上给我提了一个issue&#xff1a; 万万没想到&#xff0c;有一天我写的烂代码居然也会…

家庭装修流程五大步骤是怎样的,家庭装修有什么注意事项!

家庭装修流程五大步骤是怎样的家庭装修有什么注意事项&#xff01;现在的人们不是在城里面购买了楼房&#xff0c;就是在家里面进行翻修房子&#xff0c;不管是哪一种&#xff0c;都肯定是需要用到装修的。但是有很多的人们对于装修方面并不是很了解。想知道家庭装修流程五大步…

Qt之对话框(QDialog)

文章目录一、对话框的概念二、与QWidget的区别三、对话框2种显示方法四、对话框返回值的概念本节示例提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、对话框的概念 对话框是和用户简短交互的一种窗口。如&#xff1a;登录界面&#xff0c;关于界面…

性能-可观测数据、量化指标、性能问题、压测目标

可观测的数据数据指标 服务应用&#xff1a;CPU利用率、内存、ygc次数接口&#xff1a;核心关注接口的请求响应时间&#xff08;平均响应时间、P90、P95&#xff0c;核心关注后面2个&#xff09;、慢请求情况数据库&#xff1a;主要关注CPU使用率、内存使用率Redis&#xff1a…

前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-01

本文来研究写webpack-theme-color-replacer webpack 的实现逻辑和原理。 上一篇我们讲过&#xff0c; webpack-theme-color-replacer webpack 基本思路就是&#xff0c;webpack构建时&#xff0c;在emit事件&#xff08;准备写入dist结果文件时&#xff09;中&#xff0c;将即将…

Linux ALSA 之五 ALSA Proc Info

ALSA Proc Info一、概述二、Proc Files of Alsa Driver1、/proc/asound/xxx 简述2、创建 /proc/asound 目录树2.1 /proc/asound/version 文件2.2 /proc/asound/devices 文件2.3 /proc/asound/cards 文件2.4 /proc/asound/cardx 目录2.5 /proc/asound/pcm 文件一、概述 Linux系…

以“辛”为鉴,直播电商如何“知兴替”?

直播电商行业近年来创造了一个又一个销售神话。辛选2022年双11期间&#xff0c;18场直播销售额破亿。罗永浩在淘宝的首秀&#xff0c;6小时带货2亿元。直播间内外似乎一片繁华&#xff0c;但与此同时&#xff0c;也有许多曾经创造了带货奇迹的主播被市场淘汰&#xff0c;淡出视…

【笔记:第2课】学习开发一个RISC-V上的操作系统 - 汪辰 - 2021春

文章目录前言来源正文小结前言 创作开始时间&#xff1a;2023年1月9日20:11:06 如题&#xff0c;学习一下RISC-V。 来源 https://www.bilibili.com/video/BV1Q5411w7z5?p2&vd_source73a25632b4f745be6bbcfe3c82bb7ec0 正文 计算机硬件组成&#xff1a; 总线CPU&…

迷宫问题 | 深度优先

目录 一、说明 二、步骤 三、代码 四、结果 一、说明 什么是深度优先&#xff1f; DFS即Depth First Search&#xff0c;深度优先搜索属于图算法的一种&#xff0c;是一个针对图和树的遍历算法&#xff0c;利用深度优先搜索算法可以产生目标图的相应拓扑排序表&#xff0c…

身兼数据科学家和自由职业者,算算我在2022赚了多少钱?

2022年,我作为自由职业者数据科学家赚了多少钱&#xff1f;长按关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩扫码关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩大家好&#xff0c;首先&#xff0c;我已经等了很久了。2…

保姆级 | 最新Burpsuite安装配置

文章目录 0x00 前言 0x01 环境说明 0x02 准备工作 0x03 安装JDK 0x04 配置JDK环境 0x05 Burpsuite安装 0x06 Burpsuite环境配置 0x07 Burpsuite设置代理 0x08 Burpsuite使用验证 0x09 总结 0x00 前言 Burp Suite 是用于攻击 web 应用程序的集成平台&#xff0c;包含了…

mongodb 中做 join 的方法

【问题】Imagine you have a collection for posts, and each of these posts has the attribute userid: ObjectId( ), where ObjectID is referencing a document in the Users collection.How would you go about retrieving the user information (in this case, the user …

GC耗时高,原因竟是服务流量小?

简介 最近&#xff0c;我们系统配置了GC耗时的监控&#xff0c;但配置上之后&#xff0c;系统会偶尔出现GC耗时大于1s的报警&#xff0c;排查花了一些力气&#xff0c;故在这里分享下。 发现问题 我们系统分多个环境部署&#xff0c;出现GC长耗时的是俄罗斯环境&#xff0c;…

高校舆情监控系统建设(TOOM)如何做好教育行业舆情监控方案?

高校作为高密度学生聚集地&#xff0c;舆情管理上&#xff0c;需要保持高度的警惕性。高校中大学生是活跃在互联网上的重要群体&#xff0c;他们作为文化水平较高、思维较活跃的特殊群体&#xff0c;其网络中的言论合集往往会引发社会关注。高校舆情监控系统建设(TOOM)如何做好…

Sapped of vitality 生机已被耗尽 | 经济学人社论高质量双语精翻

选自TE20221217&#xff0c;leaders The global economy&#xff1a;Sapped of vitality 世界经济&#xff1a;生机已被耗尽 Why are the rich world’s politicians giving up on economic growth? 为什么发达国家的政客们不再追求经济增长目标&#xff1f; The prospect of …

智能音箱app开发-广州app开发定制

科技高速发展&#xff0c;智能产品遍地都是。日常生活都是智能化时代&#xff0c;智能音箱app也开始被开发出来。为用户提供便捷的服务&#xff0c;优化体验。 智能音箱app开发特点 一&#xff1a;搭建快速 线上渠道在各个行业中不可或缺的&#xff0c;因为线上平台不管是流量…