虚拟机中使用LNMP模拟跨域并结合前端代码解决CORS跨域的简单示例

时间：07-22来源：作者：点击数：

一、首先，下载lnmp_soft.tar.gz压缩包

二、解压lnmp_soft.tar.gz和下载相关的依赖，插件

1、yum -y install gcc make openssl-devel pcre-devel#基础依赖包
2、源码安装nginx
1) scp lnmp_soft.tar.gz root@192.168.88.5:/root#将压缩包拷贝到虚拟机的/root目录下
使用root账号登录后
第一步：解压lnmp_soft.tar.gz，通过ls看到有/lnmp_soft目录，进入该目录
1）tar -xf ~/lnmp_soft.tar.gz
2）cd ~/lnmp_soft
第二步：在/lnmp_soft目录中继续解压nginx-1.22.1.tar.gz，再进入解压后的目录nginx-1.22.1
1）tar -xf nginx-1.22.1.tar.gz
2）cd nginx-1.22.1
第三步：在目录nginx-1.22.1下，源码安装nginx
1）./configure 
2）make && make install
#第四步：有需要的话可以额外安装MariaDB数据库，安装PHP等
#1）yum -y install  mariadb  mariadb-server  mariadb-devel
#2）yum -y install  php  php-mysqlnd php-fpm

三、修改/usr/local/nginx/conf/nginx.conf配置文件

1. vim nginx.conf
末行模式下输入/server {
然后回车，按n键找到listen 8000对应的server {...}那块代码
将server {开始到}结束的#去掉，并修改为：
server {
        listen       8080;
        server_name   localhost;
        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            root   html;
            index  index.html index.htm;
        }
    }

四、/usr/local/nginx/sbin/nginx命令启动nginx

如果报错：nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)
则使用/usr/local/nginx/sbin/nginx -s reload

如依然报错，先查看80端口是否被占用，找到程序并停止它：
1）ss -utnlp | grep :80 
2）假设是httpd占用的，则：
systemctl stop  httpd 
3）关闭firewalld#关闭防火墙
4）还不行的话，使用setenforce 0命令（宽松模式）
5）最后再重新使用/usr/local/nginx/sbin/nginx或者/usr/local/nginx/sbin/nginx -s reload命令启动nginx

注意：
如果报错nginx: [emerg] getpwnam("nginx") failed
说明是找不到nginx用户（添加nginx用户，不让登录，只用作nginx的系统用户）
useradd -s /sbin/nologin nginx
再使用/usr/local/nginx/sbin/nginx启动nginx

五、在/usr/local/nginx/html目录下新建80.html，8080.html文件

80.html：

<!DOCTYPE html>
<html>
        <meta charset="UTF-8"/>
        <title>test page</title>
        <body>
                this is 80 port page
                <br />
                <button onclick="change()">test</button>
        </body>
        <script>
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://192.168.88.5:8080/8080.html', true);
                xhr.send();
                function change() {
                        if(xhr.readyState == 4 && xhr.status == 200) {
                                alert(xhr.responseText);
                        }
                }
        </script>
</html>

8080.html

为了简化，直接写字符串：i am 8080 port page

六、在浏览器输入192.168.88.5/80.html

1）192.168.88.5/80.html的端口是80, xhr请求http://192.168.88.5:8080/8080.html的端口明显是8080,符合跨域的基本特征

2）点击test按钮，如果正常出现弹窗，则代表跨域通信成功！

解决跨域问题的核心代码是add_header 'Access-Control-Allow-Origin' '*';（详见上面 “三、修改/usr/local/nginx/conf/nginx.conf配置文件”）

七、还原跨域场景

如果去掉add_header,就会出现CORS跨域的提示（当然也提示了要修改Access-Control-Allow-Origin属性）：

八、再次验证【add_header 'Access-Control-Allow-Origin' '*';】的效果

加回add_header 'Access-Control-Allow-Origin' '*';再执行/usr/local/nginx/sbin/nginx -s reload重启nginx，再刷新“192.168.88.5/80.html”，执行第六步又会恢复正常。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:Nginx-防盗链下一篇:防盗链在nginx中如何配置，简单演示403 forbidden的效果

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有