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

转载 2017年12月26日 00:00:00

什么是跨域?

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

本文转自:公众号  (A周立SpringCloud 

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

  • Chrome跨域:参考文档:http://www.cnblogs.com/laden666666/p/5544572.html

  • Firefox跨域:参考文档:https://segmentfault.com/q/1010000002532581/a-1020000002533699

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



Spring Boot、Dubbo项目Mock测试踩坑与总结
软考项目管理师备考的几点建议和思考
学习Java 8的编码风格带来什么样的好处

?

JAVA葵花宝典

?

长按关注置顶

java知识和技术查漏补缺,空余时间学习碎片化知识,分享开发、运维、架构等综合性知识,助力职场最后一公里与职业进阶,每天看宝典,就选它。


Spring boot跨域设置

1. 原由 本人是spring boot菜鸟,但是做测试框架后端需要使用Spring boot和前端对接,出现跨域问题,需要设置后端Response的Header.走了不少坑,在这总结一下以备以后使...
  • u011517841
  • u011517841
  • 2017年03月30日 18:02
  • 10792

Spring Boot : CROS解决跨域问题

package com.yanshu.util; import org.springframework.context.annotation.Configuration; import o...
  • ruiguang21
  • ruiguang21
  • 2017年12月27日 10:29
  • 37

Spring Boot 允许跨域请求、自定义请求头

Request header field xxx is not allowed by Access-Control-Allow-Headers in preflight response Respo...
  • qq_19260029
  • qq_19260029
  • 2017年12月22日 10:17
  • 178

浏览器的跨域问题以及解决方案

1、为什么会有跨域问题的存在?   JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源政策。 2、什么是同源?   1995年,同源政策由 Netscape 公司引入浏览...
  • u013084331
  • u013084331
  • 2016年04月10日 22:37
  • 20253

基于Spring实现可跨域访问的REST服务

Web应用中前端JavaScript访问后端的REST服务默认是不能跨域的,这里的域英文中叫Origin,有时也叫Domain,包含了协议(HTTP/HTTPS),域名和端口号。不能跨域指的是,如果来...
  • chenyongtu110
  • chenyongtu110
  • 2016年07月30日 14:57
  • 5843

为 RESTful API 配置 CORS 实现跨域请求

利用 Ruby on Rails 可以很方便地实现 RESTful API,但如果我们需要通过 AJAX 跨域调用的话,怎么办? 说到 AJAX 跨域,很多人最先想到的是 JSONP。的确,JS...
  • z69183787
  • z69183787
  • 2016年11月09日 17:54
  • 3663

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

什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 本文转自:公众号  (A周立SpringCloud ) 一、Spring Boot...
  • qq_38976693
  • qq_38976693
  • 2017年12月26日 11:37
  • 18

Spring Boot对Ajax跨域访问的支持实现

Spring Boot对Ajax跨域访问的支持实现作者在SE305课程中,需要设计一款新时代互联网购票系统,团队使用vue.js前端,Spring MVC的后台架构。开发过程中遇到跨域访问的问题,故写...
  • CheukNGAI
  • CheukNGAI
  • 2017年06月11日 17:52
  • 184

spring boot 支持js跨域请求

  • 2017年09月09日 10:37
  • 647B
  • 下载

windows下nginx 配置代理 解决浏览器跨域访问

1、首先我们要了解什么是跨域访问 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 所谓同源是指,域名,...
  • ruihaol
  • ruihaol
  • 2017年11月21日 10:33
  • 166
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:跨域访问支持(Spring Boot、Nginx、浏览器)
举报原因:
原因补充:

(最多只允许输入30个字)