2025年2月14日 星期五 甲辰(龙)年 腊月十四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 服务器 > Nginx

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

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

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

https://lnmp.org/download.html

二、解压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
  • 2cd ~/lnmp_soft
  • 第二步:在/lnmp_soft目录中继续解压nginx-1.22.1.tar.gz,再进入解压后的目录nginx-1.22.1
  • 1)tar -xf nginx-1.22.1.tar.gz
  • 2cd 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”,执行第六步又会恢复正常。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐