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