axios springboot 跨域问题解决 Access-Control-Allow-Origin Access-Control-Allow-Credentials

清疚 2024-04-18 07:55 54阅读 0赞

这是本地环境解决用的，  部署服务器测试或生产环境时必须注释掉， 服务器环境下有nginx可以解决跨域问题。

最终解决为步骤 5 。

1：403  前端访问后端controller 403 , 代表跨域无权限访问

![20190903191931601.png][]

2:  后端类加上   @CrossOrigin   放开权限的注解， 并且requestmapping method=\{requestMthod,post,requestMthod.options\}

![20190903182139558.png][]

3：@CrossOrigin 为 \* ， 下图图片 Access-Control-Allow-Origin  意思是  Origin 不能为\*

将上面第2步@CrossOrigin

改为  @CrossOrigin(origins = "http://IP加端口"), 比如@CrossOrigin(origins = "http://192.168.0.1:8080")

![20190903192015227.png][]

4:  有可能出现下图为  Access-Control-Allow-Credentials 是否支持安全证书 为空

![20190903192040343.png][]

5：  将上面第3步  @CrossOrigin(origins = "http://IP加端口")

改为：  @CrossOrigin(allowCredentials = "true"), 改为支持安全证书。 就可以了。

注意还有一个就是方法需要加上访问的方式：

![20190906111328300.png][]

这是注解方式解决：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmdfamlhbl9kb25n_size_16_color_FFFFFF_t_70][]

这是代码方式：

package com.htcf;
    
    import java.util.HashMap;
    import java.util.Map;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.context.annotation.Bean;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    import com.alibaba.fastjson.JSONObject;
    import com.tydic.open.DopApiException;
    import com.tydic.open.DopApiV1;
    
    @SpringBootApplication
    public class TestMain {
    	
    	public static void main(String[] args){
    		SpringApplication.run(TestMain.class, args);
    	}
    
    	@Bean
    	public CorsFilter corsFilter()
    	{
    		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    		CorsConfiguration corsConfiguration = new CorsConfiguration();
    		corsConfiguration.addAllowedHeader("*");
    		corsConfiguration.addAllowedMethod("*");
    		corsConfiguration.addAllowedOrigin("http://IP:8081");
    		corsConfiguration.setAllowCredentials(true);
    		source.registerCorsConfiguration("/**", corsConfiguration);
    		return new CorsFilter(source);
    	}
    	
    }

[20190903191931601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0d2d860cab4a4937a5522095ea5f70ef.png
[20190903182139558.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/987d01796cb046d2ae3d664e5d8052ab.png
[20190903192015227.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/74a7664b2bf84bb69d301a00e391f366.png
[20190903192040343.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/994107062cba4a10a456d551851f5f9d.png
[20190906111328300.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6811e224080c42b8acf6d690da4165b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmdfamlhbl9kb25n_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9746bdfe69284332b2777f00296a90aa.png