前后端分離項(xiàng)目需要解決第一個(gè)問(wèn)題就是，前端本地開(kāi)發(fā)時(shí)如何解決通過(guò)ajax請(qǐng)求產(chǎn)生的跨域的問(wèn)題。一般的做法是通過(guò)本地配置nginx反向代理進(jìn)行處理的，除此之外，還可以通過(guò)nodejs來(lái)進(jìn)行代理接口。當(dāng)然，要實(shí)現(xiàn)這個(gè)前提是，前端開(kāi)發(fā)環(huán)境必須運(yùn)行在nodejs服務(wù)中，所幸的是，現(xiàn)在前端的開(kāi)發(fā)自動(dòng)化工具都是建立在nodejs上的，所以這個(gè)前提也不是很重要。
webpack-dev-server配置跨域方案
如果你項(xiàng)目是用webpack作為前端自動(dòng)化構(gòu)建工具的話，那么可以引用webpack-dev-server來(lái)進(jìn)行配置跨域方案。webpack-dev-server是一個(gè)小型的nodejs服務(wù)器，是基于express框架的，用于實(shí)時(shí)監(jiān)聽(tīng)和打包編譯靜態(tài)資源。其中里面有一個(gè)屬性是proxy，是專(zhuān)門(mén)來(lái)配置代理請(qǐng)求接口的。
舉個(gè)例子：
比如我現(xiàn)在通過(guò)webpack構(gòu)建了一個(gè)本地開(kāi)發(fā)環(huán)境，端口號(hào)是9000，現(xiàn)在我要在本地去請(qǐng)求(GET) http://jsonplaceholder.typicode.com/users 地址獲取數(shù)據(jù)，如果前端沒(méi)有設(shè)置代理的話，請(qǐng)求會(huì)因?yàn)榭缬蛘?qǐng)求失敗。這時(shí)候通過(guò)如下配置，就可以正常請(qǐng)求了。
devServer: {
contentBase: __dirname + "/",
port: 9000,
proxy: { "/users": { //需要代理的路徑
target: "http://jsonplaceholder.typicode.com", //需要代理的域名
changeOrigin: true //必須配置為true，才能正確代理 }
}
}
通過(guò)如上配置，然后在js里面這樣請(qǐng)求就可以成功拿到數(shù)據(jù)了：
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式