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

网站，moongoose搭建网站后台，出现的跨域问题解决"/>

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 ‘’ 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.

1.2，跨域问题

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

.html：同源
.html：不同源（域名不同）
.html：不同源（域名不同）
:81/dir/other.html：不同源（端口不同）

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

2.1，下载并安装nginx

.html

2.1.1，解压后如下所示

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

./configure

HTTP rewrite 模块需要 PCRE 库的支持

sudo apt-get install libpcre3-dev

安装好PCRE 库后再次执行 ./configure

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

2.3.3，启动nginx

sudo /usr/local/nginx/sbin/nginx

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

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

sudo /etc/init.d/apache2 stop

#重启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=$1HOST_IP=$2win_hosts_path="/mnt/c/Windows/System32/drivers/etc/hosts"# 判断是否已存在 wsl2 的域名，如果存在则修改，否则追加if grep -wq "$HOST_NAME" $win_hosts_paththen# 此处因为权限问题没有直接用 sed 修改 hosts 文件win_hosts=$(sed -s "s/.* $HOST_NAME/$HOST_IP $HOST_NAME/g" $win_hosts_path)echo "$win_hosts" > $win_hosts_pathelseecho "$HOST_IP $HOST_NAME" >> $win_hosts_pathfi
}CHANGE_NGINX_HOST_BY_PORT()
{SERVER_PORT=$1HOST_IP=$2nginx_config_path="/usr/local/nginx/conf/nginx.conf"# 判断是否已存在 wsl2 的域名，如果存在则修改，否则追加if grep -wq "proxy_pass\|$SERVER_PORT" $nginx_config_paththen# 此处因为权限问题没有直接用 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_pathelseecho "$SERVER_PORT is not in $nginx_conf"fi
}CHANGE_HOST "www.anweimian" $wsl_ip
CHANGE_HOST "ubuntu" $wsl_ipCHANGE_NGINX_HOST_BY_PORT "9607" $wsl_ip