apache搭建静态网站,moongoose搭建网站后台,出现的跨域问题解决

文章目录

  • 1,问题描述
    • 1.1,当网页和后台是不同服务时会产生跨域问题
    • 1.2,跨域问题
  • 2,nginx端口转发解决跨域问题
    • 2.1,下载并安装nginx
      • 2.1.1,解压后如下所示
      • 2.1.2,进入解压目录后,执行配置脚本
    • 2.2,编译安装
    • 2.3,nginx使用
      • 2.3.1,设置nginx开机自启动
      • 2.3.2,修改配置文件配置端口转发
      • 2.3.3,启动nginx
      • 2.3.4,发现由于80端口被apache占用了,nginx无法启动
      • 2.3.5,直接关闭apache,使用nginx托管静态网站代码
  • 3,更新动态IP到nginx配置文件

1,问题描述

1.1,当网页和后台是不同服务时会产生跨域问题

Access to XMLHttpRequest at ‘http://ubuntu:9607/login’ from origin ‘http://www.anweimian.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
apache搭建静态网站,moongoose搭建网站后台,出现的跨域问题解决_第1张图片

1.2,跨域问题

同源策略会导致跨域问题
所谓"同源"指的是"三个相同"。
	协议相同
	域名相同
	端口相同

http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)

2,nginx端口转发解决跨域问题

2.1,下载并安装nginx

https://nginx.org/en/download.html
在这里插入图片描述

2.1.1,解压后如下所示

在这里插入图片描述

2.1.2,进入解压目录后,执行配置脚本

./configure
HTTP rewrite 模块需要 PCRE 库的支持

在这里插入图片描述

sudo apt-get install libpcre3-dev
安装好PCRE 库后再次执行 ./configure

apache搭建静态网站,moongoose搭建网站后台,出现的跨域问题解决_第2张图片

2.2,编译安装

sudo make -j
sudo make install

2.3,nginx使用

2.3.1,设置nginx开机自启动

vim /etc/rc.local
文本底部追加
/usr/local/nginx/sbin/nginx

2.3.2,修改配置文件配置端口转发

 /usr/local/nginx/conf/nginx.conf

apache搭建静态网站,moongoose搭建网站后台,出现的跨域问题解决_第3张图片

2.3.3,启动nginx

sudo /usr/local/nginx/sbin/nginx

2.3.4,发现由于80端口被apache占用了,nginx无法启动

apache搭建静态网站,moongoose搭建网站后台,出现的跨域问题解决_第4张图片

2.3.5,直接关闭apache,使用nginx托管静态网站代码

sudo /etc/init.d/apache2 stop

apache搭建静态网站,moongoose搭建网站后台,出现的跨域问题解决_第5张图片

#重启nginx
sudo /usr/local/nginx/sbin/nginx -s reload

3,更新动态IP到nginx配置文件

#!/usr/bin/bash
# 为 win 设置 wsl host
# win hosts 文件路径
# 获取 wsl2 的 ip
wsl_ip=$(ifconfig eth0 | grep -w inet | awk '{print $2}')

CHANGE_HOST()
{
        HOST_NAME=$1
        HOST_IP=$2
    win_hosts_path="/mnt/c/Windows/System32/drivers/etc/hosts"

        # 判断是否已存在 wsl2 的域名,如果存在则修改,否则追加
        if grep -wq "$HOST_NAME" $win_hosts_path
        then
                # 此处因为权限问题没有直接用 sed 修改 hosts 文件
                win_hosts=$(sed -s "s/.* $HOST_NAME/$HOST_IP $HOST_NAME/g" $win_hosts_path)
                echo "$win_hosts" > $win_hosts_path
        else
                echo "$HOST_IP $HOST_NAME" >> $win_hosts_path
        fi
}

CHANGE_NGINX_HOST_BY_PORT()
{
        SERVER_PORT=$1
        HOST_IP=$2

        nginx_config_path="/usr/local/nginx/conf/nginx.conf"
        # 判断是否已存在 wsl2 的域名,如果存在则修改,否则追加
        if grep -wq "proxy_pass\|$SERVER_PORT" $nginx_config_path
        then
            # 此处因为权限问题没有直接用 sed 修改 hosts 文件
            nginx_conf=$(sed -s "s/.*proxy_pass.*http:\/\/.*:$SERVER_PORT;/         proxy_pass http:\/\/$HOST_IP:$SERVER_PORT/g" $nginx_config_path)
            echo "$nginx_conf" > $nginx_config_path
        else
            echo "$SERVER_PORT is not in $nginx_conf"
        fi
}

CHANGE_HOST "www.anweimian.com" $wsl_ip
CHANGE_HOST "ubuntu" $wsl_ip


CHANGE_NGINX_HOST_BY_PORT "9607" $wsl_ip

你可能感兴趣的:(html学习笔记,nginx托管网站代码,nginx端口转发解决跨域问题,更新WSL动态IP)