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

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

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

前言

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

前端解決方案

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

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

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

后端解決方案

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

@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("*");
  }
}

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

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

您可能感興趣的文章: