SpringBoot+Vue前后端分離實現請求api跨域問題

前言

最近過年在家無聊，剛好有大把時間學習Vue，順便做了一個增刪查改+關鍵字匹配+分頁的小dome,可是使用Vue請求后端提供的Api的時候確發現一個大問題，前后端分離了，但是請求的時候也就必定會有跨域這種問題，那如何解決呢？

前端解決方案

思路：由于Vue現在大多數項目但是用腳手架快速搭建的，所以我們可以直接在項目中創建一個vue.config.js的配置文件，然后在里面配置proxy代理來解決，話不多說，直接上代碼

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

這樣配置了之后，Vue用axios或者ajax調用后臺的api的時候，只需要在請求的路徑中/api/xx/xx這種格式去發送請求 這種方式有兩個優點 1:解決了跨域問題，而且每次請求的時候只需要寫調用的接口，前綴根本不需要再次去寫 2:由于是提供了代理，利于隱藏真實的Api服務器地址，確保服務端的安全

后端解決方案

思路: 相信現在Java大多數都是Spring全家桶的天下了吧，而SpringBoot呢最近幾年也是大火，基本上大多數后端人員都用過吧，所以我們可以在SpringBoot項目中創建一個config配置包，在里面創建一個webconfig配置類，通過實現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('*'); }}

這種方式也可以解決，但是最好是前后端一致都提供跨域的解決方案

到此這篇關于SpringBoot+Vue前后端分離，請求api跨域問題的文章就介紹到這了,更多相關SpringBoot+Vue前后端分離，請求api跨域問題內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！