跨域访问支持(Spring Boot、Nginx、浏览器)

跨域访问支持(Spring Boot、Nginx、浏览器)

一、Spring Boot跨域配置

我们的后端使用Spring Boot。Spring Boot跨域非常简单,只需书写以下代码即可。

复制代码
@Configuration
public class CustomCORSConfiguration {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    return corsConfiguration;
  }

  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

代码非常简单,不做赘述。该代码在Spring Boot 1.5.4中测试通过。

二、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",其实是前端传给后端过来的。如果记不得也没有关系,浏览器的调试器会有详细说明。

参考文档:https://enable-cors.org/server_nginx.html

B.T.W,阿里云中文档描述到Nginx也可通过crossdomain.xml配置文件跨域:https://helpcdn.aliyun.com/knowledge_detail/41123.html ,不过笔者并未采用这种方式。

三、浏览器设置跨域

Chrome、Firefox本身是可以通过配置支持跨域请求的。

:通过浏览器设置实现跨域的玩法,个人没有亲测过。

相关推荐
上上迁23 分钟前
分布式接口幂等性的演进和最佳实践,含springBoot 实现(Java版本)
java·spring boot·分布式
paopaokaka_luck1 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
paopaokaka_luck3 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
柒七爱吃麻辣烫4 小时前
八股文系列-----SpringBoot自动配置的流程
java·spring boot·rpc
位东风5 小时前
【c++学习记录】状态模式,实现一个登陆功能
c++·学习·状态模式
头发那是一根不剩了5 小时前
Spring Boot 多数据源切换:AbstractRoutingDataSource
数据库·spring boot·后端
草履虫建模6 小时前
Redis:高性能内存数据库与缓存利器
java·数据库·spring boot·redis·分布式·mysql·缓存
苹果醋36 小时前
Vue3组合式API应用:状态共享与逻辑复用最佳实践
java·运维·spring boot·mysql·nginx
chanalbert7 小时前
从单体到微服务:Spring Cloud 开篇与微服务设计
spring boot·spring·spring cloud
psjasf13147 小时前
使用Ideal创建一个spring boot的helloWorld项目
java·spring boot·后端