跨域访问支持(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本身是可以通过配置支持跨域请求的。

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

相关推荐
麦兜*34 分钟前
Spring Boot秒级冷启动方案:阿里云FC落地实战(含成本对比)
java·spring boot·后端·spring·spring cloud·系统架构·maven
魂兮归乡2 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
Q_Q5110082852 小时前
python的保险业务管理与数据分析系统
开发语言·spring boot·python·django·flask·node.js·php
风象南3 小时前
SpringBoot应用开机自启动与进程守护配置
java·spring boot·后端
顽疲4 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
nightunderblackcat4 小时前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
超级小忍4 小时前
Spring Boot 与 Docker 的完美结合:容器化你的应用
spring boot·后端·docker
麦兜*5 小时前
Spring Boot 企业级动态权限全栈深度解决方案,设计思路,代码分析
java·spring boot·后端·spring·spring cloud·性能优化·springcloud
hdsoft_huge11 小时前
SpringBoot 与 JPA 整合全解析:架构优势、应用场景、集成指南与最佳实践
java·spring boot·架构
张先shen13 小时前
Elasticsearch RESTful API入门:基础搜索与查询DSL
大数据·spring boot·elasticsearch·搜索引擎·全文检索·restful