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, //代理websockets
changeOrigin: true, // 是否跨域，虛擬的站點需要更管origin
pathRewrite: {
'^/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;
@Configuration
public 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用Gradle做Java代碼質(zhì)量檢查的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Java Optional解決空指針異?？偨Y(jié)(java 8 功能)
這篇文章主要介紹了Java Optional解決空指針異?？偨Y(jié)(java 8 功能)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了SpringBoot與SpringCache的概念及基本用法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
在復(fù)雜的業(yè)務(wù)場景中,嵌套事務(wù)可以幫助我們更加精細(xì)地控制數(shù)據(jù)的一致性,然而,在 Spring Boot 中,如果嵌套事務(wù)的配置不當(dāng),可能會導(dǎo)致事務(wù)不生效的問題,尤其是在同一個類中進(jìn)行方法調(diào)用時,本文將詳細(xì)介紹嵌套事務(wù)的原理、失效的原因以及解決方案2025-01-01
Idea 2020.2安裝MyBatis Log Plugin 不可用的解決方法
小編在使用時發(fā)現(xiàn)Idea 2020.2 MyBatis Log Plugin 收費了，這個可以替代用，小編特此把解決方案分享到腳本之家平臺供大家參考，感興趣的朋友一起看看吧2020-11-11
在微服務(wù)項目中,會遇到@Autowired注解失效的情況,下面這篇文章主要給大家介紹了關(guān)于@Autowired注解以及失效的幾個原因的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Java集合排序，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
深入理解Spring MVC的數(shù)據(jù)轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于Spring MVC數(shù)據(jù)轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起看看吧。2017-09-09
之前我們使用spring,最多的還是通過xml配置文件的方式來配置spring bean等內(nèi)容,隨著注解的廣泛應(yīng)用和spring4中Java config的引入,xml配置文件方式逐步被替換,但是如果是想要使用xml配置文件方式的話,也可以通過@ImportResource注解來實現(xiàn),下面我們來一起看下如何使用.2021-05-05
Spring Boot基礎(chǔ)入門之基于注解的Mybatis
這篇文章主要給大家介紹了關(guān)于Spring Boot基礎(chǔ)入門之基于注解的Mybatis的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07