快捷導(dǎo)航

如何用nginx解決前端部署跨域問題

更新時間：2024年07月02日 10:17:52 作者：biaobiaogege

這篇文章主要介紹了如何用nginx解決前端部署跨域問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

源碼編譯安裝

下載

 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

得到以下結(jié)果，編譯安裝成功

命令

/usr/local/nginx/sbin/nginx是個可執(zhí)行文件，是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; #監(jiān)聽端口
        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; # [例如]反向代理的服務(wù)器真正的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】能夠看到前端頁面，括號里面是云服務(wù)器的ip，進入自己租的云服務(wù)器界面復(fù)制，比如騰訊云在下圖這里復(fù)制。

不是配置的反向代理的ip

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

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

nginx反向代理之多端口映射的實現(xiàn)
這篇文章主要介紹了nginx反向代理之多端口映射的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Nginx配置location匹配順序詳細總結(jié)
這篇文章主要介紹了Nginx配置location匹配順序詳解,Nginx是十分輕量級的HTTP服務(wù)器,Nginx憑借其穩(wěn)定性、低資源消耗、簡單配置和豐富的功能，從十多年前名不見經(jīng)傳的Web服務(wù)器軟件，發(fā)展到如今能夠跟Apache匹敵的地位,需要的朋友可以參考下
2023-08-08
Nginx反向代理和內(nèi)容替換模塊實現(xiàn)網(wǎng)頁內(nèi)容動態(tài)替換功能
Nginx是一款輕量級高性能服務(wù)器軟件,雖然輕量,但功能非常強大,可用于提供WEB服務(wù)、反向代理、負載均衡、緩存服務(wù)、甚至可以通過添加一些模塊搭建rtmp流媒體服務(wù),最近碰到一個客戶需求,需要用到nginx反向代理替換網(wǎng)頁內(nèi)容,貼出來跟大家交流,如有不足之處請指出
2024-10-10
Nginx可視化管理軟件(Nginx Proxy Manager)的使用
Nginx Proxy Manager是一款開源的Nginx可視化管理界面,本文就來介紹一下Nginx Proxy Manager的使用,感興趣的可以了解一下
2024-03-03
nginx限速之連接數(shù)限制技巧分享
通過查看Nginx的并發(fā)連接，我們可以更清除的知道網(wǎng)站的負載情況。下面這篇文章主要給大家介紹了關(guān)于nginx限速之連接數(shù)限制技巧的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2018-01-01
ubuntu 下的nginx服務(wù)器配置詳解
這篇文章主要介紹了ubuntu 下的nginx服務(wù)器配置詳解的相關(guān)資料,需要的朋友可以參考下
2017-03-03
超實用的Nginx常見配置合集分享
這篇文章主要為大家詳細介紹了超實用的Nginx常見配置合集，文中的示例代碼講解詳細，對我們學(xué)習(xí)或工作有一定的參考價值，感興趣的可以了解一下
2022-07-07
nginx代理文件目錄、下載站點方式
這篇文章主要介紹了nginx代理文件目錄、下載站點方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-03-03
詳解Prometheus 抓取 nginx 訪問日志的指標(biāo)
通過結(jié)合NGINX Exporter, Fluentd, Prometheus和Grafana, 可有效監(jiān)控并可視化NGINX中的4xx和5xx狀態(tài)碼日志,首先使用Fluentd收集和解析NGINX日志,再通過Prometheus抓取Fluentd暴露的指標(biāo),本文介紹Prometheus抓取nginx訪問日志的指標(biāo),感興趣的朋友一起看看吧
2024-10-10
NGINX阻止指定ip的請求問題及解決方案
web頁面做了一個功能,在websocket請求失敗的情況,會定時向服務(wù)端進行重試進行建立連接,這篇文章給大家介紹NGINX阻止指定ip的請求問題及解決方案,感興趣的朋友一起看看吧
2024-02-02