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 然后就可以再其它页面访问了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了RocketMQ设计之故障规避机制，故障规避机制就是用来解决当Broker出现故障，Producer不能及时感知而导致消息发送失败的问题，下面详细介绍需要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了java实现上传文件到oss(阿里云)功能,结合实例形式详细分析了java上传文件到阿里云的具体步骤、配置及相关实现技巧,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了java实现把一个List集合拆分成多个的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
httpclient模拟post请求json封装表单数据的实现方法
下面小编就为大家带来一篇httpclient模拟post请求json封装表单数据的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
java使用selenium自动化WebDriver等待的示例代码
显式等待和隐式等待是WebDriver中两种常用的等待方式,它们都可以用来等待特定的条件满足后再继续执行代码,本文给大家介绍java使用selenium自动化WebDriver等待,感兴趣的朋友一起看看吧2023-09-09
这篇文章主要为大家详细介绍了Java Web实现自动登陆功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
idea运行main方法或Test避免编译整个应用的实现方法
这篇文章主要介绍了idea运行main方法或Test避免编译整个应用的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
本篇文章主要介绍了Java实现画线、矩形、椭圆、字符串功能的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
本篇文章主要介绍了如何在Spring Boot项目使用参数校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了配置JAVA环境变量中CLASSPATH变量的作用,需要的朋友可以参考下2023-06-06
最新评论