NodeJs部署,解決history和跨域

1.路由模式:

hash模式
hash 模式使用 URL 的 hash 來模擬一個(gè)完整的 URL, 其顯示的網(wǎng)路路徑中會(huì)有 “#” 號(hào)
hash 雖然出現(xiàn) URL 中募寨,但不會(huì)被包含在 HTTP 請(qǐng)求中族展,對(duì)后端完全沒有影響,因此改變 hash 后刷新, 也不會(huì)有問題
hash 模式示例: http://localhost:8080/#/home http://localhost:8080/#/user

history模式
history 模式美化后的hash模式拔鹰,路徑中不包含“#”仪缸。依賴于 Html5 的 history api
由于改變了地址, 刷新時(shí)會(huì)按照修改后的地址請(qǐng)求后端, 需要后端配置處理, 將地址訪問做映射, 否則會(huì) 404
history 模式示例: http://localhost:8080/home http://localhost:8080/user

Vue 項(xiàng)目修改路由模式:
修改路由模式從 hash 轉(zhuǎn)變?yōu)閔istory模式列肢,只需要將路由的mode類型改成history即可恰画,一般在在src/router/index.js

// 創(chuàng)建路由實(shí)例
const createRouter = () => new Router({
  mode: 'history',//路由模式修改為history
  scrollBehavior: () => ({ y: 0 }),
  // 指定路由規(guī)則
  routes: [
    ...constantRoutes // 靜態(tài)路由規(guī)則數(shù)組
  ]
})

配置好之后,我們?cè)L問路徑不再需要加 # 號(hào)同樣運(yùn)行正常瓷马,這是因?yàn)?webpack 默認(rèn)配好了對(duì)于 history 模式的處理拴还,實(shí)際上線其實(shí)是有問題的,需要我們?cè)黾宇~外的配置

注意:history 模式下首次打開可以正常訪問 一旦刷新就會(huì)出現(xiàn)找不到資源的情況 這是因?yàn)椴患?# 號(hào)欧聘,服務(wù)器會(huì)當(dāng)成一般的資源進(jìn)行處理片林,發(fā)現(xiàn)找不到資源路徑就會(huì)報(bào)錯(cuò)

2.解決history
使用 koa 框架部署項(xiàng)目
a.建立 web 服務(wù)文件夾 myServer
b.在該文件夾下,初始化 npm:npm init -y
c.安裝服務(wù)端框架 koa (也可以采用 express 或者 egg ):npm i koa koa-static
d.myServer 中新建 public 目錄,并拷貝打包好的 dist 目錄內(nèi)容费封,到myServer/public
e.在根目錄下創(chuàng)建 app.js焕妙,代碼如下:

const Koa  = require('koa')
const serve = require('koa-static')
const app = new Koa()
// 將public下的代碼靜態(tài)化
app.use(serve(__dirname + "/public"))
app.listen(9999, () => {
  console.log('項(xiàng)目啟動(dòng): 9999端口')
})

此時(shí),已使用koa完成了項(xiàng)目的部署弓摘,接下來就是解決history問題:
安裝 koa中間件:

# 專門處理history模式的中間件
npm install koa2-connect-history-api-fallback

注冊(cè)中間件:

const Koa  = require('koa')
const serve = require('koa-static')
+ const { historyApiFallback } = require('koa2-connect-history-api-fallback')
const app = new Koa();
// 這句話 的意思是除接口之外所有的請(qǐng)求都發(fā)送給了 index.html
+ app.use(historyApiFallback({ 
  // 這里的whiteList是 白名單的意思
+  whiteList: ['/api']
}))

// 將public下的代碼靜態(tài)化
app.use(serve(__dirname + "/public"))
app.listen(9999, () => {
    console.log('項(xiàng)目啟動(dòng): 9999端口')
  })

此時(shí)解決了刷新 404 的問題 ~~~

3.解決跨域問題
安裝跨域代理中間件:

npm install koa2-proxy-middleware

配置跨域代理:

const Koa  = require('koa')
const serve = require('koa-static');
const { historyApiFallback } = require('koa2-connect-history-api-fallback');
const proxy = require('koa2-proxy-middleware')
const app = new Koa();

// 添加代理轉(zhuǎn)發(fā)規(guī)則
app.use(proxy({
  targets: {
      // 匹配/api開頭后面任意字符正則
    '/api/(.*)': {
        target: 'http://xxx.xxx.com', //后端服務(wù)器地址
        changeOrigin: true
    }
  }
}))
// 這句話 的意思是除接口之外所有的請(qǐng)求都發(fā)送給了 index.html
app.use(historyApiFallback({ 
  whiteList: ['/api']
}));  // 這里的whiteList是 白名單的意思
app.use(serve(__dirname + "/public")); //將public下的代碼靜態(tài)化

app.listen(9999, () => {
    console.log('項(xiàng)目啟動(dòng): 9999端口')
  })

注意:此時(shí)前端訪問接口的baseUrl應(yīng)該為:'/api',接口需訪問本地服務(wù)器焚鹊。
此時(shí)即完美解決了接口的跨域問題哦~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市韧献,隨后出現(xiàn)的幾起案子末患,更是在濱河造成了極大的恐慌,老刑警劉巖势决,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阻塑,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡果复,警方通過查閱死者的電腦和手機(jī)陈莽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來虽抄,“玉大人走搁,你說我怎么就攤上這事÷蹩撸” “怎么了私植?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長车酣。 經(jīng)常有香客問我曲稼,道長,這世上最難降的妖魔是什么湖员? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任贫悄,我火速辦了婚禮,結(jié)果婚禮上娘摔,老公的妹妹穿的比我還像新娘窄坦。我一直安慰自己,他們只是感情好凳寺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布鸭津。 她就那樣靜靜地躺著,像睡著了一般肠缨。 火紅的嫁衣襯著肌膚如雪逆趋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天怜瞒,我揣著相機(jī)與錄音父泳,去河邊找鬼般哼。 笑死吴汪,一個(gè)胖子當(dāng)著我的面吹牛惠窄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漾橙,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼杆融,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了霜运?” 一聲冷哼從身側(cè)響起脾歇,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎淘捡,沒想到半個(gè)月后藕各,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡焦除,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年激况,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膘魄。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡乌逐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出创葡,到底是詐尸還是另有隱情浙踢,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布灿渴,位于F島的核電站洛波,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏骚露。R本人自食惡果不足惜蹬挤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荸百。 院中可真熱鬧闻伶,春花似錦、人聲如沸够话。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽女嘲。三九已至畜份,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間欣尼,已是汗流浹背爆雹。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國打工停蕉, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钙态。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓慧起,卻偏偏與公主長得像,于是被迫代替她去往敵國和親册倒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蚓挤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容