前言

最近在寫和同學(xué)一起做一個前后端分離的項目，今日開始對接口準(zhǔn)備進(jìn)行 登錄注冊 的時候發(fā)現(xiàn)前端在發(fā)起請求后，抓包發(fā)現(xiàn)后端返回了一個403的錯誤，解決了很久發(fā)現(xiàn)是【跨域問題】，第一次遇到，便作此記錄?

異常描述

在后端服務(wù)器啟動后，前端頁面也起了起來，然后點擊這個【登錄】按鈕準(zhǔn)備向后端發(fā)起POST請求時卻沒有任何的反應(yīng)，便覺得很疑惑

于是來到后端的控制臺觀察是否有什么異常，但是也發(fā)現(xiàn)并沒有任何的異常Exception顯示出來，就覺得很奇怪(?∀?(?∀?(?∀?*)

抓包排查

那么這個時候：提升自己的機會就又來了，我便準(zhǔn)備去查看網(wǎng)頁控制臺并抓包進(jìn)行觀察

再次打開這個網(wǎng)頁發(fā)送請求的時候便發(fā)現(xiàn)，出現(xiàn)了兩個 url，仔細(xì)觀察發(fā)現(xiàn)端口號是不一樣的，一個是我服務(wù)器啟動的端口，為8080，另一個呢問了前端的同學(xué)說是它占用的這個端口號，為5173

那么兩個端口號都不一致前端發(fā)起請求后端無法接受到確實是可以解釋得通的

接著仔細(xì)查看這里的英文便可以看到前面的這個localhost:5173已經(jīng)被 CORS策略 給拒絕了，說：不存在“Access Control Allow Origin”這樣的標(biāo)頭，那讀到這里我又可以進(jìn)一步斷定應(yīng)該是【訪問被拒絕】了，但是還無法做出完全的肯定

此時我又去進(jìn)行抓包確認(rèn)，連著點了三次登錄按鈕，并通過【Fiddler】進(jìn)行抓包便可以觀察到很醒目的三個403，那么清楚HTTP協(xié)議的狀態(tài)碼的同學(xué)便可以清楚

【403狀態(tài)碼】：表示訪問被拒絕，有的頁面通常需要用戶具有一定的權(quán)限才能訪問(登陸后才能訪問)

例如:：查看碼云的私有倉庫, 如果不登陸, 就會出現(xiàn)403

Spring Boot解決跨域問題

那么此時，我們便可以在后端通過SpringBoot去寫一個配置文件，以指定哪個端口是可以進(jìn)行跨域訪問的

以下是相關(guān)的代碼，只需要在config包（一般放配置文件）下添加一個這樣的類即可，因為它是有關(guān)一些配置，所以要加上@Configuration注解

package com.example.demo.config;

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;

@Configuration
public class MyCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin(http"://localhost:5173");    // 允許誰跨域
        configuration.setAllowCredentials(true);                    // 傳cookie
        configuration.addAllowedMethod("*");                        // 允許哪些方法跨域 post/get
        configuration.addAllowedHeader("*");                        // 允許哪些頭信息

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration); // 攔截一切請求

        return new CorsFilter(source);
    }
}

最主要的還是配置下面的這一句，將端口號為5173的口子放開，這樣任何的HTTP請求就可以進(jìn)來了

configuration.addAllowedOrigin("http://localhost:5173");    // 允許誰跨域

此時我們再去看到就可以發(fā)現(xiàn)前后端可以進(jìn)行交互了，只是因著其他的原因讓以至于后端返回了一些錯誤的信息給到前端

總結(jié)

到此這篇關(guān)于SpringBoot前后端分離跨域問題:狀態(tài)碼403拒絕訪問解決辦法的文章就介紹到這了,更多相關(guān)SpringBoot狀態(tài)碼403拒絕訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論