springboot vue 跨域问题的解决
更新时间：2018年10月18日 10:58:32 作者：Sky786905664
这篇文章主要介绍了springboot vue 跨域问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1、Spring Boot跨域配置有两种方法
在后端使用Spring Boot。Spring Boot跨域非常简单，只需书写以下代码即可。
@Configuration
public class CustomCORSConfiguration {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
return new CorsFilter(source);
}
}
2.Nginx跨域配置
Spring Boot应用用Nginx反向代理。而前端跨域请求的需求不减。
Nginx跨域也比较简单，只需添加以下配置即可。
location / {
proxy_pass http://localhost:8080;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
}
}
其中：add_header 'Access-Control-Expose-Headers' 务必加上你请求时所带的header。
例如本例中的“Token”，其实是前端传给后端过来的。如果记不得也没有关系，浏览器的调试器会有详细说明。
三、浏览器设置跨域
Chrome、Firefox本身是可以通过配置支持跨域请求的。
Chrome跨域：参考文档：Chrome跨域
四、前端Vue设置跨域
先设置 axios
axios.defaults.withCredentials = true;
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; //证明是ajax 请求
psot 请求加入
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
}
设置Config 文件下面的index.js 然后就可以再其它页面访问了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了关于Spring Boot对jdbc的支持问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了Spring的@Scope注解详细解析,@Scope注解主要作用是调节Ioc容器中的作用域,springboot 程序启动时会对classpath路径下的包中的类进行扫描,将类解析成BeanDefinition,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Java MyBatis本地缓存原理详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
springboot如何解决跨域后session获取不到sessionId不一致
这篇文章主要介绍了springboot如何解决跨域后session获取不到sessionId不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算,下面这篇文章主要给大家介绍了关于Java中BigDecimal使用注意避坑的相关资料,需要的朋友可以参考下2023-02-02
详解使用spring cloud config来统一管理配置文件
这篇文章主要介绍了详解使用spring cloud config来统一管理配置文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了解决SpringAop内部调用时不经过代理类的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
Java程序中要求参与的计算的数据，必须要保证数据类型的一致性，如果数据类型不一致将发生类型的转换。本文将通过示例详细说说Java中数据类型的转换，感兴趣的可以了解一下2022-11-11
SpringBoot项目网页加载出现Whitelabel Error Page的解决
这篇文章主要介绍了SpringBoot项目网页加载出现Whitelabel Error Page的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要介绍了springbean的八种加载方式,一种是XML方式声明bean，使用@Component及其衍生注解@Controller 、@Service、@Repository定义bean，还有其他方法，本文给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
最新评论