資訊專欄INFORMATION COLUMN
摘要：還是回到萬能的文件，添加匹配規(guī)則實(shí)現(xiàn)代理轉(zhuǎn)發(fā)設(shè)置代理轉(zhuǎn)發(fā)通過上面的設(shè)置，在重啟服務(wù)，可以讓頁面中所有包含字段的請(qǐng)求都轉(zhuǎn)為由服務(wù)器去向地址發(fā)送請(qǐng)求，從而巧妙的解決了瀏覽器的跨域問題。
1.Nginx入門與基本操作篇 注：由于服務(wù)器是windows系統(tǒng)，所以本文主要講解Nginx在windows下的操作。
首先下載Nginx
解壓縮，我們所有的配置基本都在萬能的 nginx/conf/nginx.conf 中完成，其它文件可以不用理
關(guān)于nginx.conf
...
#需要我們按需要修改的一般只有中間server里的代碼
server {
# 設(shè)置監(jiān)聽端口
listen 9000;
server_name localhost;
# 設(shè)置靜態(tài)資源路徑，如下設(shè)置打輸入地址時(shí)會(huì)打開H盤app/dist下的index頁面
location / {
root H:/app/dist;
index index.html;
}
# 報(bào)錯(cuò)頁面，同上根據(jù)需要設(shè)置，也可不理
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
...
這樣一個(gè)簡(jiǎn)單服務(wù)的配置就完成了，啟動(dòng)服務(wù)訪問 http://localhost:9000 即可打開對(duì)應(yīng)網(wǎng)頁，如果需要啟動(dòng)多個(gè)服務(wù)，只需多添加server配置后重啟即可。
幾個(gè)常用的操作指令(以下指令請(qǐng)?jiān)趎ginx文件目錄下使用)
# 啟動(dòng)nginx(我的情況是運(yùn)行起來后cmd就輸入不了其它指令了，需要在打開一個(gè)cmd來操作)
nginx.exe
# 修改nginx.conf文件后重啟nginx
nginx.exe -s reload
# 暫停nginx服務(wù)
nginx.exe -s stop
# 有時(shí)暫停服務(wù)失效，需要強(qiáng)制終止nginx進(jìn)程 注：/f 強(qiáng)制執(zhí)行
taskkill /im nginx.exe /f
2.反向代理解決跨域問題
通常開發(fā)環(huán)境可以通過設(shè)置proxy解決跨域問題，而生產(chǎn)環(huán)境下要么把前端項(xiàng)目放在后端項(xiàng)目里，要么設(shè)置cor解決跨域問題，前者不利于前后端分離，后者需要后端配置，而現(xiàn)在使用nginx做啟動(dòng)服務(wù)設(shè)置反向代理可以很好解決跨域問題。
還是回到萬能的nginx.conf文件，添加location匹配規(guī)則實(shí)現(xiàn)代理轉(zhuǎn)發(fā)
server {
listen 9000;
server_name localhost;
location / {
root H:/app/dist;
index index.html;
}
#設(shè)置代理轉(zhuǎn)發(fā)
location /api/ {
proxy_pass http://localhost:9600/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
通過上面的設(shè)置，在重啟服務(wù)，可以讓頁面中所有包含 /api/ 字段的請(qǐng)求都轉(zhuǎn)為由服務(wù)器去向http://localhost:9600/地址發(fā)送請(qǐng)求，從而巧妙的解決了瀏覽器的跨域問題。
怎么樣，是不是很簡(jiǎn)單，快動(dòng)手配置是試試吧(^_^)~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/40321.html
摘要：本文將針對(duì)使用生態(tài)開發(fā)完成的網(wǎng)站，以版本為基礎(chǔ)兼容目標(biāo)，實(shí)現(xiàn)全功能正常使用的全面兼容解決方案。這樣做的目的，是逐步減少全局性方法，使得語言逐步模塊化。此外，使用這個(gè)，一旦頁面不處于瀏覽器的當(dāng)前標(biāo)簽，就會(huì)自動(dòng)停止刷新。 前言 背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請(qǐng)求：axios Vue 官方對(duì)于 ie 瀏覽器版本兼容情...
摘要：基本入門前端掘金作者本文屬于翻譯文章，原文鏈接為。如果如何把應(yīng)用放在容器中運(yùn)行掘金本文適合零基礎(chǔ)，且希望使用運(yùn)行應(yīng)用的人士。后端掘金使用構(gòu)建網(wǎng)站。 nginx 基本入門 - 前端 - 掘金作者：villainthr 本文屬于翻譯文章，原文鏈接為 nginx Beginner’s Guide。是至今為止見過最好的 nginx 入門文章。額。。。沒有之一。 這篇教程簡(jiǎn)單介紹了 nginx ...
摘要：本文同步在個(gè)人博客上，歡迎關(guān)注這篇文章整理了在前端開發(fā)中，在開發(fā)環(huán)境下使用重寫及代理功能的方法。表示該規(guī)則是使用正則定義的，區(qū)分大小寫。因此牢記在上下文中使用，而在上下文中使用。 本文同步在個(gè)人博客shymean.com上，歡迎關(guān)注 這篇文章整理了在前端開發(fā)中，在開發(fā)環(huán)境下使用nginx重寫uri及代理功能的方法。 參考 nginx中文文檔 前端開發(fā)者必備的 Nginx 知識(shí) Ngin...
閱讀 1858·2021-09-22 15:45
閱讀 1639·2019-08-30 15:55
閱讀 1828·2019-08-29 11:16
閱讀 3301·2019-08-26 11:44
閱讀 702·2019-08-23 17:58
閱讀 2698·2019-08-23 12:25
閱讀 1624·2019-08-22 17:15
閱讀 3597·2019-08-22 16:09
