如何用nginx解決前端部署跨域問題
更新時(shí)間：2024年07月02日 10:17:52 作者：biaobiaogege
這篇文章主要介紹了如何用nginx解決前端部署跨域問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
該方法是在云服務(wù)器上【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
得到以下結(jié)果，編譯安裝成功
命令
/usr/local/nginx/sbin/nginx是個(gè)可執(zhí)行文件，是nginx的main process
cd /usr/local/nginx/sbin ./nginx -v //查看版本號(hào) ./nginx //啟動(dòng)nginx ./nginx -s stop //停止nginx ./nginx -s quit //安全退出 ./nginx -s reload //重新加載配置文件【常用】 ps aux|grep nginx 查看nginx進(jìn)程
前端部署反向代理配置
/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平級(jí)
index index.html index.htm; #入口文件
try_files $uri $uri/ /index.html; #好像可以解決history路由，不過我用的hash
}
location /shadow/api { # 這個(gè)就是代碼中的想要訪問的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'; #支持請(qǐng)求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
}保存只會(huì)用命令進(jìn)行配置重新加載
sudo /usr/local/nginx/sbin/nginx -s reload
效果
如果build正確，并且配置生效，直接在瀏覽器訪問【xxx.xxx.xxx.xxx:80】能夠看到前端頁面，括號(hào)里面是云服務(wù)器的ip，進(jìn)入自己租的云服務(wù)器界面復(fù)制，比如騰訊云在下圖這里復(fù)制。
不是配置的反向代理的ip
以上例子的反向代理ip是http://1.13.xxx.xxx:80
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx服務(wù)器高性能優(yōu)化的配置方法小結(jié)
這篇文章主要介紹了Nginx服務(wù)器高性能優(yōu)化的配置方法小結(jié),包括一些內(nèi)核參數(shù)的優(yōu)化介紹,需要的朋友可以參考下2015-12-12
Nginx 解決504錯(cuò)誤超時(shí)問題小結(jié)
本文主要介紹了ginx出現(xiàn)504 Gateway Timeout錯(cuò)誤的原因,通常是因?yàn)槌绦驁?zhí)行時(shí)間過長(zhǎng)導(dǎo)致響應(yīng)超時(shí),下面就來介紹一下解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2025-02-02
這篇文章主要介紹了關(guān)于Nginx中if語句的判斷條件與多條件判斷的相關(guān)資料，文中給出了詳細(xì)的示例代碼，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要為大家介紹了Crontab和Shell腳本切割Nginx日志，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Nginx（發(fā)音為“engine-x”）是一款高性能的?Web?服務(wù)器、反向代理服務(wù)器和負(fù)載均衡器,廣泛應(yīng)用于全球各類網(wǎng)站和應(yīng)用中,下面就跟隨小編一起來了解下如何配置?Nginx?以滿足不同的需求吧2025-01-01
Nginx配置請(qǐng)求頭攜帶原始請(qǐng)求信息的實(shí)現(xiàn)
本文主要介紹了Nginx配置請(qǐng)求頭攜帶原始請(qǐng)求信息的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了超實(shí)用的Nginx常見配置合集，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定的參考價(jià)值，感興趣的可以了解一下2022-07-07
利用nginx與ffmpeg搭建流媒體服務(wù)器過程詳解
這篇文章主要給大家介紹了利用nginx與ffmpeg搭建流媒體服務(wù)器的全過程，文中介紹的很詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了nginx虛擬主機(jī)配置實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
流量限制(rate-limiting)是Nginx中一個(gè)非常實(shí)用,卻經(jīng)常被錯(cuò)誤理解和錯(cuò)誤配置的功能,下面這篇文章主要給大家介紹了關(guān)于nginx限流及配置管理的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04