快捷導(dǎo)航

Spring boot 和Vue開發(fā)中CORS跨域問題解決

更新時(shí)間：2018年09月05日 10:55:06 作者：青春無罪

這篇文章主要介紹了Spring boot 和Vue開發(fā)中CORS跨域問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

跨域資源共享CORS（Cross-origin Resource Sharing），是W3C的一個(gè)標(biāo)準(zhǔn)，允許瀏覽器向跨源的服務(wù)器發(fā)起XMLHttpRequest請(qǐng)求，克服ajax請(qǐng)求只能同源使用的限制。關(guān)于CORS的詳細(xì)解讀，可參考阮一峰大神的博客：跨域資源共享CORS詳解。

1. 遇到的問題：

我用spring-boot 做Rest服務(wù)，Vue做前端框架，用了element-admin-ui這個(gè)框架做后臺(tái)管理。在調(diào)試的過程中遇到了如下錯(cuò)誤:

Preflight response is not successful

2. 分析問題

這個(gè)問題是典型的CORS跨域問題。

所謂跨域：

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)JavaScript施加的安全限制。

3. 解決方法

在項(xiàng)目中添加類CustomCORSConfiguration 代碼如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author spartajet
 * @description
 * @create 2018-05-15 下午5:00
 * @email spartajet.guo@gmail.com
 */
@Configuration
public class CustomCORSConfiguration {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    corsConfiguration.setAllowCredentials(true);
    return corsConfiguration;
  }

  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vuex使用方法超詳細(xì)講解(實(shí)用)
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲(chǔ)狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下
2024-10-10
把vue-router和express項(xiàng)目部署到服務(wù)器的方法
下面小編就為大家分享一篇把vue-router和express項(xiàng)目部署到服務(wù)器的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
推薦一款簡易的solid?js消息UI庫使用詳解
這篇文章主要為大家介紹了推薦一款簡易的solid-js消息UI庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue項(xiàng)目從webpack3.x升級(jí)webpack4不完全指南
前段時(shí)間，泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級(jí)到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下
2019-04-04
Vue.delete()刪除對(duì)象的屬性說明
這篇文章主要介紹了Vue.delete()刪除對(duì)象的屬性說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
nuxt使用vuex存儲(chǔ)及獲取用戶信息踩坑的解決
這篇文章主要介紹了nuxt使用vuex存儲(chǔ)及獲取用戶信息踩坑的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
通過vue提供的keep-alive減少對(duì)服務(wù)器的請(qǐng)求次數(shù)
這篇文章主要介紹了通過vue提供的keep-alive減少對(duì)服務(wù)器的請(qǐng)求次數(shù),文中給大家補(bǔ)充介紹了vue路由開啟keep-alive時(shí)的注意點(diǎn)，需要的朋友可以參考下
2018-04-04
vue中@keyup.enter失效問題及解決
這篇文章主要介紹了vue中@keyup.enter失效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vite構(gòu)建項(xiàng)目并支持微前端
本文主要介紹了vite構(gòu)建項(xiàng)目并支持微前端，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
詳解vue掛載到dom上會(huì)發(fā)生什么
這篇文章主要介紹了詳解vue掛載到dom上會(huì)發(fā)生什么，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01