前言

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

異常描述

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

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

抓包排查

那么這個時候：提升自己的機會就又來了，我便準備去查看網頁控制臺并抓包進行觀察

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

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

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

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

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

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

Spring Boot解決跨域問題

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

以下是相關的代碼，只需要在config包（一般放配置文件）下添加一個這樣的類即可，因為它是有關一些配置，所以要加上@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請求就可以進來了

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

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

總結

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

最新評論