快捷導(dǎo)航

SpringBoot+Vue前后端分離實(shí)現(xiàn)請求api跨域問題

更新時(shí)間：2020年06月19日 08:32:01 作者：LYAR1225

這篇文章主要介紹了SpringBoot+Vue前后端分離實(shí)現(xiàn)請求api跨域問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

前端解決方案

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

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

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

后端解決方案

思路: 相信現(xiàn)在Java大多數(shù)都是Spring全家桶的天下了吧，而SpringBoot呢最近幾年也是大火，基本上大多數(shù)后端人員都用過吧，所以我們可以在SpringBoot項(xiàng)目中創(chuàng)建一個(gè)config配置包，在里面創(chuàng)建一個(gè)webconfig配置類，通過實(shí)現(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: