虚拟机3种方式nginx/apache+跨域

一.跨域
1.“源”由协议、域名、端口号组成
2.同源策略是浏览器的一种保护机制。
指两个源相同（即两个源的协议、域名、端口号都相同）
（1）JSONP
Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript,相当于直接用JavaScript解析。

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

实现原理：在全局定义一个函数，将函数名以get传参的方式写入到script标签的src属性中(如下图所示)，后端返回函数名以及参数，全局定义的函数就会自动调用，形参会接收后端传过来的参数。
注意：
1、jsonp只能解决GET类型的ajax请求跨域问题。
2、jsonp请求不是ajax请求，而是一般的get请求。

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

postMessage跨域：
window.postMessage() ：允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用这种消息传递技术来实现安全的通信。
这项技术称为“跨文档消息传递”，又称为“窗口间消息传递”或者“跨域消息传递”。
postMessage() ：该方法允许有限的通信 —— 通过异步消息传递的方式 —— 在来自不同源的脚本之间。
二.Apache基于多IP、多端口、多域名访问
IP
修改子配置文件

[root@CentOS01 ~]# vim /usr/local/apache/conf/extra/httpd-vhosts.conf 
 
# *代表本机ip，也可以直接写成本就ip地址
<VirtualHost *:80>
   # ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/usr/local/apache/htdocs/web1"
   # ServerName dummy-host.example.com
   # ServerAlias www.dummy-host.example.com
   # ErrorLog "logs/dummy-host.example.com-error_log"
   # CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>
 
Listen 81 #打开81端口
<VirtualHost *:81>
   #ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/usr/local/apache/htdocs/web2"
   # ServerName dummy-host2.example.com
   # ErrorLog "logs/dummy-host2.example.com-error_log"
   # CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

测试并重启apache

[root@CentOS01 ~]# /usr/local/apache/bin/apachectl -t
 
[root@CentOS01 ~]# killall httpd
 
[root@CentOS01 ~]# /usr/local/apache/bin/apachectl
 
[root@CentOS01 ~]# netstat -nptl

检验
端口
在主配置文件添加监听端口

vim /etc/httpd/conf/httpd.conf 

Listen 8080 

添加8080的端口虚拟配置

#cat virtualhost.conf

<VirtualHost 192.168.137.200:80>
  DocumentRoot "/var/www/test200"
  ServerName    www.test200.com
</VirtualHost>

<VirtualHost 192.168.137.201:80>
  DocumentRoot "/var/www/test201"
  ServerName    www.test201.com
</VirtualHost>

# cd /var/www/           #切换目录

# mkdir test201-8080        #创建目录

# echo "test201-8080" >>./test201-8080/index.html       #创建主页

测试
域名
添加域名的虚拟主机配置

NameVirtualHost 192.168.137.200:80 
<VirtualHost 192.168.137.200:80>
  DocumentRoot "/var/www/test200"
  ServerName    www.test200.com
</VirtualHost>

<VirtualHost 192.168.137.200:80>
  DocumentRoot "/var/www/test200net"
  ServerName    www.test200.net
</VirtualHost>

<VirtualHost 192.168.137.201:80>
  DocumentRoot "/var/www/test201"
  ServerName    www.test201.com
</VirtualHost>

<VirtualHost 192.168.137.201:8080>
  DocumentRoot "/var/www/test2018080"
  ServerName    www.test2018080.com
</VirtualHost>

三.nginx基于多IP、多端口、多域名访问
监听指定 ip 端口

listen 127.0.0.1:8000；
listen 127.0.0.1;
listen 8000;			
listen *:8000;

监听多个端口

server {
   listen  443 ssl http2;
   listen  [::]:443 ssl http2;
   listen  80;
   listen  81;
   server_name example.com ;
}

基于不同域名访问
一般都是在nginx.conf的尾部加入include，使用vhost这样每个网页用单独的配置。
www.server111.com配置文件

server {
listen 80;
server_name www.server111.com;    ##指定域名


location / {
root /www/ctm/xcy-project/yun-app-lives; ##项目路径
try_files $uri $uri/ /;
index index.html index.htm;

}

error_page 500 502 503 504 /50x.html;
location = /50x.html {

}
}