前言

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

異常描述

在后端服務(wù)器啟動(dòng)后，前端頁(yè)面也起了起來(lái)，然后點(diǎn)擊這個(gè)【登錄】按鈕準(zhǔn)備向后端發(fā)起POST請(qǐng)求時(shí)卻沒(méi)有任何的反應(yīng)，便覺(jué)得很疑惑

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

抓包排查

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

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

那么兩個(gè)端口號(hào)都不一致前端發(fā)起請(qǐng)求后端無(wú)法接受到確實(shí)是可以解釋得通的

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

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

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

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

Spring Boot解決跨域問(wèn)題

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

以下是相關(guān)的代碼，只需要在config包（一般放配置文件）下添加一個(gè)這樣的類即可，因?yàn)樗怯嘘P(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");    // 允許誰(shuí)跨域
        configuration.setAllowCredentials(true);                    // 傳cookie
        configuration.addAllowedMethod("*");                        // 允許哪些方法跨域 post/get
        configuration.addAllowedHeader("*");                        // 允許哪些頭信息

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

        return new CorsFilter(source);
    }
}

最主要的還是配置下面的這一句，將端口號(hào)為5173的口子放開(kāi)，這樣任何的HTTP請(qǐng)求就可以進(jìn)來(lái)了

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

此時(shí)我們?cè)偃タ吹骄涂梢园l(fā)現(xiàn)前后端可以進(jìn)行交互了，只是因著其他的原因讓以至于后端返回了一些錯(cuò)誤的信息給到前端

總結(jié)

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

最新評(píng)論