報(bào)錯(cuò)截圖

報(bào)錯(cuò)意思是請(qǐng)求頭中沒(méi)有Access-Control-Allow-Origin

報(bào)錯(cuò)分析

但我在網(wǎng)關(guān)的配置文件中早就加了跨域的配置了

嘗試解決

于是我上網(wǎng)開始查

但是網(wǎng)上的代碼要么方法過(guò)時(shí)報(bào)錯(cuò)，要么就向配置文件原因沒(méi)有起作用，好在我堅(jiān)持不懈的查詢下，把所有有用的信息拼湊成了一個(gè)有用的配置方法

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;

@Configuration
public class CorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedMethod("*"); // 允許任何方法（post、get等）
        config.addAllowedOrigin("*"); // 允許任何域名使用
        config.addAllowedHeader("*"); // 允許任何頭
        config.setAllowCredentials(true); //允許接受cookie

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}

只要在網(wǎng)關(guān)微服務(wù)下創(chuàng)建一個(gè)配置類把這段代碼加進(jìn)去即可

于是

重新啟動(dòng)

好家伙

再次報(bào)錯(cuò)，不過(guò)這次不是沒(méi)有該屬性，而是兩個(gè)！！

那既然這樣

我就試試只用代碼配置，而注釋配置文件配置（因?yàn)殚_始就是配置文件配置無(wú)效）

重啟走起

依然報(bào)重復(fù)錯(cuò)誤。。。。

最終

最后通過(guò)調(diào)試發(fā)現(xiàn)

請(qǐng)求發(fā)往網(wǎng)關(guān)后，再次發(fā)往其他微服務(wù)，而該微服務(wù)的controller類上配置了跨域注解

這就導(dǎo)致了兩次Access-Control-Allow-Origin被設(shè)置了

所有只要把@CrossOrigin注解去了即可

再次重啟

總結(jié)

除了為啥在配置文件里配置沒(méi)有生效沒(méi)搞懂外，其他都能理解

同時(shí)這里也解釋了一個(gè)問(wèn)題，為啥要專門寫一個(gè)接口api模塊來(lái)專門實(shí)現(xiàn)微服務(wù)間的調(diào)用

從這里調(diào)用用戶微服務(wù)來(lái)看，網(wǎng)關(guān)配置了跨域，那么其他的微服務(wù)就不能配置跨域了

那這樣微服務(wù)如果直接調(diào)用就成了跨域了，而api接口模塊就很好的解決了這個(gè)問(wèn)題，同時(shí)也限制了服務(wù)與服務(wù)見(jiàn)可調(diào)用接口的數(shù)量，按需來(lái)調(diào)用，看來(lái)當(dāng)初聽(tīng)老師話多創(chuàng)建一個(gè)api接口模塊是有原因的啊

解決睡覺(jué)！

補(bǔ)充?。?！

后來(lái)發(fā)現(xiàn)

刪除其他微服務(wù)的跨域配置在vue連接里可行

但是如果在html頁(yè)面直接發(fā)送axios請(qǐng)求后臺(tái)數(shù)據(jù)

請(qǐng)求網(wǎng)關(guān)可行，但是請(qǐng)求完了網(wǎng)關(guān)，網(wǎng)關(guān)會(huì)進(jìn)行一次頁(yè)面轉(zhuǎn)發(fā)

這就使得第二次請(qǐng)求沒(méi)有Access-Control-Allow-Origin報(bào)跨域請(qǐng)求

如果將后臺(tái)服務(wù)的跨域配置重新寫上

又會(huì)出現(xiàn)Access-Control-Allow-Origin重復(fù)的問(wèn)題。。。

好在查到了大佬的帖子，可以在配置文件找那個(gè)添加一段過(guò)濾配置

解決重復(fù)跨域問(wèn)題，進(jìn)行header去重

spring:
  cloud:
    gateway:
      default-filters:
        - DedupeResponseHeader=Vary Access-Control-Allow-Credentials Access-Control-Allow-Origin, RETAIN_UNIQUE
        - DedupeResponseHeader=Access-Control-Allow-Origin, RETAIN_FIRST

原帖鏈接

至于帖子中寫的解決cookie跨域問(wèn)題，，，我試了，似乎沒(méi)有效果，一樣報(bào)跨域錯(cuò)誤，于是我在配置類嘗試著找相關(guān)方法，還真有！

只需要在配置類里添加以一段設(shè)置cookie允許跨域的配置（已經(jīng)在上面的配置方法里補(bǔ)充了cookie跨域代碼）

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論