38.Spring Boot與Vue跨域的問題

1.在vue前端的跨域個人解決方法是

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://192.168.2.2:8080/',
        changeOrigin:true,
        pathRewrite:{
          '^/api':'/'
        }
      }
    },
複製代碼

我在分類頁面去調用接口仍是報錯

Access to XMLHttpRequest at 'http://192.168.2.2:8080/api/allcategory' from origin 
'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
 header is present on the requested resource.
複製代碼

我看不少網上的文章都說只要這麼作了就能夠的可是也仍是不行又看到另一個文章說後端可能也要作一個跨域問題我只好這樣的去嘗試在Spring Boot作實現跨域問題

2.Spring Boot跨域訪問

個人作法是這樣的

package com.gz.tzreport.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 GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否發送Cookie信息
        config.setAllowCredentials(true);
        //放行哪些原始域(請求方式)
        config.addAllowedMethod("*");
        //放行哪些原始域(頭部信息)
        config.addAllowedHeader("*");
        //暴露哪些頭部信息（由於跨域訪問默認不能獲取所有頭部信息）
//        config.addExposedHeader("*");

        config.addExposedHeader("Content-Type");
        config.addExposedHeader( "X-Requested-With");
        config.addExposedHeader("accept");
        config.addExposedHeader("Origin");
        config.addExposedHeader( "Access-Control-Request-Method");
        config.addExposedHeader("Access-Control-Request-Headers");

        //2.添加映射路徑
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}
複製代碼

我參考的文章SpringBoot 實現先後端分離的跨域訪問（CORS） 在這篇文章中我用他的第一種方式

CorsConfiguration config = new CorsConfiguration();
          //放行哪些原始域
          config.addAllowedOrigin("*");
          //是否發送Cookie信息
          config.setAllowCredentials(true);
          //放行哪些原始域(請求方式)
          config.addAllowedMethod("*");
          //放行哪些原始域(頭部信息)
          config.addAllowedHeader("*");
          //暴露哪些頭部信息（由於跨域訪問默認不能獲取所有頭部信息）
          config.addExposedHeader("*");

        //2.添加映射路徑
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
複製代碼

這樣子是有問題的報錯以下

Error creating bean with name 'corsFilter' defined in class path resource [com/gz/tzreport/config/GlobalCorsConfig.class]: Bean instantiation via factory method failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.web.filter.CorsFilter]: Factory method 'corsFilter' threw exception; nested exception is java.lang.IllegalArgumentException: '*' is not a valid exposed header value
複製代碼

Caused by: java.lang.IllegalArgumentException: '*' is not a valid exposed header value
	at org.springframework.web.cors.CorsConfiguration.addExposedHeader(CorsConfiguration.java:282)
	at com.gz.tzreport.config.GlobalCorsConfig.corsFilter(GlobalCorsConfig.java:25)
	at com.gz.tzreport.config.GlobalCorsConfig$$EnhancerBySpringCGLIB$$1f6ff0f1.CGLIB$corsFilter$0(<generated>)
	at com.gz.tzreport.config.GlobalCorsConfig$$EnhancerBySpringCGLIB$$1f6ff0f1$$FastClassBySpringCGLIB$$d3e777bb
複製代碼

應該要改爲我上面的那樣的在addExposedHeader把各個具體的一些頭部信息都添加進去而不能用*號來代替 再到vue頁面查看能夠請求數據成功同時在postman中也能正常請求下來數據 解決問題參考的是這一篇文章Spring Boot 2.0.2+Ajax解決跨域請求的問題 Github同步更新我的學習筆記，若是這篇文章對你有好處點個星星你不虧 WiHongNoteBook