Apache和Nginx虚拟机的配置方法+跨域知识点整理

2023-11-18

Apache的配置

ip

创建虚拟主机目录

新建测试页面

修改主配置文件

[root@hya ~]# vim /etc/httpd/conf/httpd.conf    #在主配置文件的最下面添加
<VirtualHost 192.168.122.1:80>       基于ip的虚拟主机地址
        DocumentRoot /var/www/web1
        ServerName www.index.com         虚拟主机
</VirtualHost>

重启Apache

得到结果

端口号

在/etc/httpd/conf/httpd.conf中添加

然后重启httpd

得到结果

基于域名

在/etc/httpd/conf/httpd.conf中添加

在再/etc/hosts中添加192.168.122.1 www.index.com

然后得到结果

Nginx的虚拟主机配置

基于端口

创建虚拟主机的目录

重定向值给index.html

修改Nginx的配置文件

然后重启Nginx，之后输入得到结果

基于ip

添加网卡

然后修改

vim /etc/nginx/conf.d/server.conf 

server{
        listen 80;
        server_name 192.168.150.129;
        location /{
                root usr/share/nginx/html/web2/index.html;
                index index.html index.htm;
                }
}

关闭防火墙

systemctl stop firewalld.service

基于域名

主机与vm能互相ping通（因为我的虚拟机被我弄崩了所以无法测试）

vim /etc/nginx/conf.d/server.conf 

server{
        listen 80;
        server_name 192.168.150.129;
        location /{
                root /var/www/nginx/server;
                index index.html index.htm;
                }
}

测试时关闭防火墙

跨域的四种方法

什么是跨域

1.“源”由协议、域名、端口号组成

2.同源策略是浏览器的一种保护机制。同源顾名思义，指两个源相同（即，两个源的协议、域名、端口号都相同）

违反了同源策略的请求就是通常说的跨域请求

- JSONP

Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript,相当于直接用JavaScript解析。

JSONP方案和ajax没有任何关系，是通过script标签的src属性实现，因此JSONP方案只支持get请求，并且兼容性好，几乎所有浏览器都支持。

实现原理：在全局定义一个函数，将函数名以get传参的方式写入到script标签的src属性中(如下图所示)，后端返回函数名以及参数，全局定义的函数就会自动调用，形参会接收后端传过来的参数。

2.CORS

CORS（Cross-Origin Resource Sharing，跨域资源共享）方案，就是通过服务器设置一系列响应头来实现跨域。而客户端不需要做什么额外的事情。

3.postMessage跨域

window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用这种消息传递技术来实现安全的通信。

这项技术称为“跨文档消息传递”，又称为“窗口间消息传递”或者“跨域消息传递”。

postMessage() 方法，该方法允许有限的通信 —— 通过异步消息传递的方式 —— 在来自不同源的脚本之间。

postMessage 可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递

页面与嵌套的 iframe 消息传递

多窗口之间消息传递

server1.js

let express = require('express'),
    app = express();
app.listen(1001, _ => {
    console.log('OK!');
});
app.use(express.static('./'));

server.js

let express = require('express'),
    app = express();
app.listen(1002, _ => {
    console.log('OK!');
});
app.use(express.static('./'));

html

<body>
    <iframe id="iframe" src="http://127.0.0.1:1002/MESSAGE/1.html" frameborder="0" style="display: none;"></iframe>
    <script>
        // 第一个参数是发送的信息，第二个参数是指定源
        iframe.onload=function(){
            iframe.contentWindow.postMessage('珠峰培训', 'http://127.0.0.1:1002/');
        }

        // => 监听B传递的信息
        window.onmessage = function (ev) {
            console.log(ev.data);
        }
    </script>
</body>

html

<body>
    <script>
        window.onmessage = function (ev) {
            // 接受1发送来的信息
            console.log(ev.data);
            // 给1发送信息
            ev.source.postMessage(ev.data + '@@@', ev.origin);
        }
    </script>
</body>

- web sockets

WebSocket 是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀，他是HTML5 的一个持久化的协议，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。只有在支持web socket协议的服务器上才能正常工作。

非简单请求

常见的情况有 Content-Type 为 application/json 的请求。浏览器在发出非简单请求前，会发送一次 options 请求。用于先询问服务器，当前域名是否被允许访问，以及可以使用哪些 methods 和 headers。

预检请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

options 请求的请求头会带上三个头

Origin 当前请求域名

Access-Control-Request-Method 必须，用来列出正式请求的 method，例如 POST

Access-Control-Request-Headers 多个值用逗号隔开，例如 Content-Type

options 响应的响应头

Access-Control-Allow-Origin 必须，和简单请求一样

Access-Control-Allow-Credentials 可选，和简单请求一样

Access-Control-Max-Age 该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

Access-Control-Allow-Methods 必须，多个 method 用逗号隔开，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的方法。这是为了避免多次预检请求。

Access-Control-Allow-Headers 如果浏览器请求头里包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。多个值用逗号隔开，表明服务器支持的所有头信息字段，不限于浏览器在预检中请求的字段

然后返回 http 状态码 204

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)