服务器 > 服务器 > Nginx

如何用nginx解决前端部署跨域问题

36人参与 2024-09-08 Nginx

该方法是在云服务器上【ubuntu18.04】源码编译nginx,【另外一种直接用apt下载】

源码编译安装

 wget http://nginx.org/download/nginx-1.19.0.tar.gz
 sudo tar zxf nginx-1.19.0.tar.gz
 sudo apt install -y gcc make libpcre3 libpcre3-dev zlib1g zlib1g-dev openss
 cd nginx-1.19.0/
 sudo ./configure
 sudo make
 sudo make install

得到以下结果,编译安装成功

命令

/usr/local/nginx/sbin/nginx是个可执行文件,是nginx的main process

cd /usr/local/nginx/sbin
./nginx -v //查看版本号
./nginx //启动nginx
./nginx -s stop //停止nginx
./nginx -s quit //安全退出
./nginx -s reload //重新加载配置文件【常用】
ps aux|grep nginx 查看nginx进程

前端部署反向代理配置

/usr/local/nginx/conf 文件下的nginx.config是配置文件

nginx.config文件主要有全局块,events块,http块。主要在http块配置

sudo vim /usr/local/nginx/conf/nginx.config

找到http块下的server块,修改类似于如下代码块,即能完成反向代理配置。

server {
        listen       80; #监听端口
        server_name  localhost; #可以改成自己的域名或者ip
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   dist; # 前端build文件所在位置与/usr/local/nginx/conf平级
            index  index.html index.htm; #入口文件
            try_files $uri $uri/ /index.html; #好像可以解决history路由,不过我用的hash
        }
 
        location /shadow/api {     # 这个就是代码中的想要访问的baseurl
            proxy_pass http://1.13.xxx.xxx:80; # [例如]反向代理的服务器真正的ip
            add_header 'access-control-allow-origin' '*'; #允许来自所有的访问地址
            add_header 'access-control-allow-credentials' 'true';
            add_header 'access-control-allow-methods' 'get, put, post, delete, options'; #支持请求方式
            add_header 'access-control-allow-headers' 'content-type,*';
        }
}

保存只会用命令进行配置重新加载

sudo /usr/local/nginx/sbin/nginx -s reload

效果

如果build正确,并且配置生效,直接在浏览器访问【xxx.xxx.xxx.xxx:80】能够看到前端页面,括号里面是云服务器的ip,进入自己租的云服务器界面复制,比如腾讯云在下图这里复制。

不是配置的反向代理的ip

以上例子的反向代理ip是http://1.13.xxx.xxx:80

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)
打赏 微信扫一扫 微信扫一扫

您想发表意见!!点此发布评论

推荐阅读

使用Nginx创建临时和永久重定向的具体示例

09-08

生产环境部署Nginx服务器双机热备部署keepalived的步骤(多种模式教程)

09-08

Nginx rewrite地址重写的详细解析

09-08

ubuntu nginx安装及服务配置跨域问题处理方式

09-08

Nginx 流量控制/限流的具体实现示例

09-08

Nginx会话保持的具体实现

09-08

猜你喜欢

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论