SpringBoot+Vue前后端分離實現(xiàn)請求api跨域問題
前言
最近過年在家無聊,剛好有大把時間學(xué)習(xí)Vue,順便做了一個增刪查改+關(guān)鍵字匹配+分頁的小dome,可是使用Vue請求后端提供的Api的時候確發(fā)現(xiàn)一個大問題,前后端分離了,但是請求的時候也就必定會有跨域這種問題,那如何解決呢?
前端解決方案
思路:由于Vue現(xiàn)在大多數(shù)項目但是用腳手架快速搭建的,所以我們可以直接在項目中創(chuàng)建一個vue.config.js的配置文件,然后在里面配置proxy代理來解決,話不多說,直接上代碼
module.exports = { devServer: { proxy: { ’/api’:{target: ’http://127.0.0.1:8181’, //API服務(wù)器的地址ws: true, //代理websocketschangeOrigin: true, // 是否跨域,虛擬的站點需要更管originpathRewrite: { ’^/api’: ’’} } } }};
這樣配置了之后,Vue用axios或者ajax調(diào)用后臺的api的時候,只需要在請求的路徑中/api/xx/xx這種格式去發(fā)送請求 這種方式有兩個優(yōu)點 1:解決了跨域問題,而且每次請求的時候只需要寫調(diào)用的接口,前綴根本不需要再次去寫 2:由于是提供了代理,利于隱藏真實的Api服務(wù)器地址,確保服務(wù)端的安全
后端解決方案
思路: 相信現(xiàn)在Java大多數(shù)都是Spring全家桶的天下了吧,而SpringBoot呢最近幾年也是大火,基本上大多數(shù)后端人員都用過吧,所以我們可以在SpringBoot項目中創(chuàng)建一個config配置包,在里面創(chuàng)建一個webconfig配置類,通過實現(xiàn)WebMvcConfigurer接口的addCorsMappings方法來解決跨域問題
package com.vue.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping('/**').allowedOrigins('*').allowedMethods('GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS').allowCredentials(true).maxAge(3600).allowedHeaders('*'); }}
這種方式也可以解決,但是最好是前后端一致都提供跨域的解決方案
到此這篇關(guān)于SpringBoot+Vue前后端分離,請求api跨域問題的文章就介紹到這了,更多相關(guān)SpringBoot+Vue前后端分離,請求api跨域問題內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法2. phpstudy apache開啟ssi使用詳解3. JSP之表單提交get和post的區(qū)別詳解及實例4. Xml簡介_動力節(jié)點Java學(xué)院整理5. 詳解瀏覽器的緩存機(jī)制6. .Net Core和RabbitMQ限制循環(huán)消費的方法7. jsp實現(xiàn)登錄驗證的過濾器8. jsp文件下載功能實現(xiàn)代碼9. ASP動態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗分享10. 存儲于xml中需要的HTML轉(zhuǎn)義代碼
