使用Nginx 反向代理來避免 ajax 跨域請(qǐng)求的方法
服務(wù)器上 nginx + tomcat ,其中 nginx 監(jiān)聽 80 端口, tomcat 監(jiān)聽 8080 端口。
因?yàn)閷?duì)前端不熟悉,以為用 ajax 就可以不需要 callback ,然而前端的同學(xué)說不跨域的情況下才不需要 callback ,讓我在返回的 json 里加上??墒俏覄倓倢W(xué)會(huì)了最基本的 spring-mvc 用法,根本不知道怎么加上 callback
網(wǎng)上到時(shí)找到一些可行的代碼,差不多這個(gè)樣子:
@RequestMapping(method=RequestMethod.GET,value="getProjectStatusList",produces="text/html;charset=UTF-8") @ResponseBody public String getProjectStatusList(HttpServletRequest request, HttpServletResponse response){ Map<String,Object> map = new HashMap<String,Object>(); try{ String callback = request.getParameter("callback"); //System.out.println("token:"+request.getHeader("token")); List<String> list = ss.getProjectStatusList(); map.put("status", "success"); map.put("data", list); ObjectMapper mapper = new ObjectMapper(); //這個(gè)拼接是重點(diǎn)。。。 String result = callback+"("+mapper.writeValueAsString(map)+")"; //String result = mapper.writeValueAsString(map); return result; }catch(Exception e){ JSONObject jo = new JSONObject(); jo.put("status", "fail"); jo.put("data", e.getMessage()); return jo.toString(); } }
然而這樣改動(dòng)對(duì)我來說簡(jiǎn)直是傷筋動(dòng)骨,因?yàn)槲矣刑嗟?URL 映射,修改的成本太大。
所以機(jī)智的我想到了 nginx ,這家伙不就是拿來搞反向代理的嗎?真是機(jī)智如我
有了這個(gè)思路,做起來就簡(jiǎn)單了。直接在監(jiān)聽 80 端口的 server 中添加一個(gè) location :
location /myApp { proxy_pass http://localhost:8080/myApp; }
重新加載 nginx :
{NGINX_HOME}/sbin/nginx -s reload
然后就把之前 http://site:8080/myApp 的跨域請(qǐng)求變成了 http://site/myApp 的非跨域請(qǐng)求。
以上所述是小編給大家介紹的使用Nginx 反向代理來避免 ajax 跨域請(qǐng)求的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語言Less寫成。下面通過本文給大家介紹Ajax bootstrap美化網(wǎng)頁并實(shí)現(xiàn)頁面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03FormData+Ajax實(shí)現(xiàn)上傳進(jìn)度監(jiān)控
FormData類型其實(shí)是在XMLHttpRequest 2級(jí)定義的,它是為序列化表以及創(chuàng)建與表單格式相同的數(shù)據(jù)(當(dāng)然是用于XHR傳輸)提供便利。接下來通過本文給大家分享FormData+Ajax實(shí)現(xiàn)上傳進(jìn)度監(jiān)控,需要的朋友一起看看吧2017-11-11探討Ajax中有關(guān)readyState(狀態(tài)值)和status(狀態(tài)碼)的問題
這篇文章主要介紹了探討Ajax中有關(guān)readyState(狀態(tài)值)和status(狀態(tài)碼)的問題的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06ajax實(shí)現(xiàn)select三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了ajax動(dòng)態(tài)實(shí)現(xiàn)select三級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Ajax二級(jí)聯(lián)動(dòng)菜單實(shí)現(xiàn)原理及代碼
二級(jí)聯(lián)動(dòng)菜單,一個(gè)多么方便且實(shí)用的用戶交互功能,有需求的朋友可以參考下本文,或許對(duì)你的菜單知識(shí)深入學(xué)習(xí)有幫助,好了,閑話不多說,看代碼吧2013-01-01ajax、axios和fetch之間優(yōu)缺點(diǎn)重點(diǎn)對(duì)比總結(jié)
今天被問到用沒用過ajax axios,我回答經(jīng)常用axios,但ajax用的比較少,下面這篇文章主要給大家介紹了關(guān)于ajax、axios和fetch之間優(yōu)缺點(diǎn)重點(diǎn)對(duì)比總結(jié)的相關(guān)資料,需要的朋友可以參考下2022-12-12Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)
本文給大家介紹jquery ajax請(qǐng)求方法小結(jié),jquery作為一個(gè)輕量級(jí)的js框架,能快速的開發(fā)js應(yīng)用,并且在一定程度上改變了我們寫js代碼的習(xí)慣,對(duì)jquery ajax請(qǐng)求感興趣的朋友參考下2015-11-11