前言

最近過(guò)年在家無(wú)聊，剛好有大把時(shí)間學(xué)習(xí)Vue，順便做了一個(gè)增刪查改+關(guān)鍵字匹配+分頁(yè)的小dome,可是使用Vue請(qǐng)求后端提供的Api的時(shí)候確發(fā)現(xiàn)一個(gè)大問(wèn)題，前后端分離了，但是請(qǐng)求的時(shí)候也就必定會(huì)有跨域這種問(wèn)題，那如何解決呢？

前端解決方案

思路：由于Vue現(xiàn)在大多數(shù)項(xiàng)目但是用腳手架快速搭建的，所以我們可以直接在項(xiàng)目中創(chuàng)建一個(gè)vue.config.js的配置文件，然后在里面配置proxy代理來(lái)解決，話不多說(shuō)，直接上代碼

module.exports = { devServer: { proxy: { ’/api’:{target: ’http://127.0.0.1:8181’, //API服務(wù)器的地址ws: true, //代理websocketschangeOrigin: true, // 是否跨域，虛擬的站點(diǎn)需要更管originpathRewrite: { ’^/api’: ’’} } } }};

這樣配置了之后，Vue用axios或者ajax調(diào)用后臺(tái)的api的時(shí)候，只需要在請(qǐng)求的路徑中/api/xx/xx這種格式去發(fā)送請(qǐng)求 這種方式有兩個(gè)優(yōu)點(diǎn) 1:解決了跨域問(wèn)題，而且每次請(qǐng)求的時(shí)候只需要寫調(diào)用的接口，前綴根本不需要再次去寫 2:由于是提供了代理，利于隱藏真實(shí)的Api服務(wù)器地址，確保服務(wù)端的安全

后端解決方案

思路: 相信現(xiàn)在Java大多數(shù)都是Spring全家桶的天下了吧，而SpringBoot呢最近幾年也是大火，基本上大多數(shù)后端人員都用過(guò)吧，所以我們可以在SpringBoot項(xiàng)目中創(chuàng)建一個(gè)config配置包，在里面創(chuàng)建一個(gè)webconfig配置類，通過(guò)實(shí)現(xiàn)WebMvcConfigurer接口的addCorsMappings方法來(lái)解決跨域問(wèn)題

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前后端分離，請(qǐng)求api跨域問(wèn)題的文章就介紹到這了,更多相關(guān)SpringBoot+Vue前后端分離，請(qǐng)求api跨域問(wèn)題內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！