在LayUI圖片上傳中,解決由跨域問題引起的請(qǐng)求接口錯(cuò)誤的方法
在LayUI圖片上傳中,解決由跨域問題引起的請(qǐng)求接口錯(cuò)誤的方法
在ssm框架整合中,使用layui作為前端頁(yè)面,拖拽圖片上傳,填寫接口后,后臺(tái)能夠成功接收到數(shù)據(jù),但由于頁(yè)面資源和后臺(tái)訪問地址的不一致(即使域名一致但端口不一致)引起跨域問題,導(dǎo)致接收資源后在前端無(wú)法接收到后臺(tái)返回的數(shù)據(jù)。
前臺(tái)頁(yè)面:
<html> <head> <meta charset="UTF-8"> <title>校園網(wǎng)絡(luò)打印</title> <link rel="stylesheet" type="text/css" href="css/layui.css" rel="external nofollow" /> </head> <body bgcolor="#F0F0FF"> <div class='layui-upload-drag' id='test10'> <i class='layui-icon'></i>" <p>點(diǎn)擊上傳,或?qū)⑽募献У酱颂?lt;/p> </div> </body> <script src="layui.all.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ layui.use('upload', function(){ var $ = layui.jquery; upload = layui.upload; //拖拽上傳 upload.render({ elem: '#test10', url: 'http://127.0.0.1:8088/file/picture', choose: function(obj){ alert(11111); }, done: function(res){ alert(res.code); } }); }); </script> </html>
后臺(tái)代碼如下:
@Controller @RequestMapping("/file") public class FileController { @RequestMapping(value="/picture",method= {RequestMethod.POST}) @ResponseBody public String upLoad(MultipartFile file,HttpServletResponse response) { response.addHeader("Access-Control-Allow-Origin", "*");//解決跨域問題的方法之一,但有弊端 System.out.println(file.getName()); System.out.println(file.getSize()); return "{\"code\":\"0\",\"msg\":\"1\",\"data\":\"111\"}"; } }
解決思路:解決跨域問題的方法適用。
以上這篇在LayUI圖片上傳中,解決由跨域問題引起的請(qǐng)求接口錯(cuò)誤的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)不規(guī)則TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)不規(guī)則TAB選項(xiàng)卡效果代碼,通過(guò)簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換元素樣式實(shí)現(xiàn)不規(guī)則選項(xiàng)卡效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09淺析js中的every()對(duì)空數(shù)組總返回true
JavaScript?語(yǔ)言的核心部分足夠大,以至于我們很容易誤解其某些部分的工作方式,本文就來(lái)和大家一起討論下為什么JS中的?every()對(duì)空數(shù)組總返回?true,需要的可以參考下2023-09-09javascript實(shí)現(xiàn)動(dòng)態(tài)改變層大小的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)改變層大小的方法,涉及javascript操作頁(yè)面屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05JS Generator函數(shù)yield表達(dá)式示例詳解
這篇文章主要為大家介紹了JS Generator函數(shù)yield表達(dá)式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10JS數(shù)組實(shí)現(xiàn)分類統(tǒng)計(jì)實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了js數(shù)組實(shí)現(xiàn)分類統(tǒng)計(jì)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09JavaScript+Canvas實(shí)現(xiàn)帶跳動(dòng)效果的粒子動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)JavaScript和Canvas實(shí)現(xiàn)帶跳動(dòng)效果的粒子動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-03-03使用egg.js實(shí)現(xiàn)手機(jī)、驗(yàn)證碼注冊(cè)的項(xiàng)目實(shí)踐
本文主要介紹了使用egg.js實(shí)現(xiàn)手機(jī)、驗(yàn)證碼注冊(cè)的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04JavaScript實(shí)現(xiàn)多重繼承的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多重繼承的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)多重繼承的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01js?select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼
這篇文章主要介紹了js?select支持手動(dòng)輸入實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-05-05微信小程序本地存儲(chǔ)實(shí)現(xiàn)每日簽到、連續(xù)簽到功能
這篇文章主要介紹了微信小程序本地存儲(chǔ)實(shí)現(xiàn)每日簽到、連續(xù)簽到功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10