什么是跨域
跨域是指 不同域名之间相互访问。即浏览器控制当前网页下不能执行其他网站的脚本，这是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
也就是如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容
如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。
跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。
同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
前端发起的请求只要不符合同源策略就会出现跨域问题。
案例分析
URL |
说明 |
是否允许通信 |
同一域名下 |
允许 |
|
同一域名下不同文件夹 |
允许 | |
同一域名，不同端口 |
不允许 | |
同一域名，不同协议 |
不允许 | |
域名和域名对应ip |
不允许 |
|
主域相同，子域不同 |
不允许 | |
同一域名，不同二级域名（同上） |
不允许（cookie这种情况下也不允许访问） | |
不同域名 |
不允许 |
为什么前后端分离后会导致跨域问题？
前后端分离后，前端代码和后端代码都是独立部署的，一般前端采用Nginx作为web服务器部署，后端spring boot由于内置了tomcat，一般都是通过jar包直接启动。
假设前后端部署在同一台服务器上，那么2者访问的端口必定不一致，不符合同源策略，所以出现跨域问题。
如果前后端部署在不同服务器上，那么访问的ip或者域名必然不一致，也会出现跨域问题。
通过jsonp实现跨域
jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。
jsonp的产生:
1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
3.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.
4.而json又是一个轻量级的数据格式,还被js原生支持
5.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，
前端json请求示例：
<!DOCTYPE html> <html> <head> <title>测试跨域访问</title> <meta charset="utf-8" /> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type : "get", async : true, jsonp : "callbackName",// 后端接口参数名 jsonpCallback : "callbackFunction", // 回调函数名 url : "http://A/hello/map/getUser.json", dataType : "jsonp", // 数据格式为 jsonp success : function(data) { console.log("success"); } }); }); </script> <script type="text/javascript"> var callbackFunction = function(data) { alert('接口返回的数据是：' + JSON.stringify(data)); }; </script> </body> </html>
后端jsonp代码参考：
/** * * The class JsonBackController. * * Description:该控制器返回一串简单的json数据,json数据由一个简单的User对象组成 * * @author: huangjiawei * @since: 2018年6月12日 * @version: $Revision$ $Date$ $LastChangedBy$ * */ @RestController @RequestMapping(value = "/map") public class JsonBackController { private static final Logger logger = LoggerFactory.getLogger(JsonBackController.class); /** * 解决跨域请求数据 * @param response * @param callbackName 前端回调函数名 * @return */ @RequestMapping(value = "getUser.json") public void getUser(HttpServletResponse response, @RequestParam String callbackName) { User user = new User("huangjiawei", 22); response.setContentType("text/javascript"); Writer writer = null; try { writer = response.getWriter(); writer.write(callbackName + "("); writer.write(user.toString()); writer.write(");"); } catch (IOException e) { logger.error("jsonp响应写入失败！ 数据：" + user.toString(), e); } finally { if (writer != null) { try { writer.close(); } catch (IOException e) { logger.error("输出流关闭异常！", e); } writer = null; } } } }
由于JSONP的原理其实就是欺骗浏览器，以方式调用接口，解析数据。所以，jsonp的请求方式只能是get方式，如果接口只接受post请求方式，则再做考虑。
这种方式代码侵入强，请求方式也有限制，现在基本不再使用。
Spring Boot对JSONP的支持
4.1版本以后的SpringMVC中，为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据（SpringBoot接收解析web请求是依赖于SpringMVC实现的）
使用AbstractJsonpResponseBodyAdvice来支持跨域请求很简单，只需要继承这个类就可以了。具体代码如下：
全局jsonp请求配置：
package com.laowan.jsonp.config; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice; /** * Created by wb-zhangkenan on 2016/12/1. */ @ControllerAdvice(basePackages = "com.laowan.jsonp.controller") public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{ public JsonpAdvice() { super("callback","jsonp"); } }
测试接口：
package com.laowan.jsonp.controller; import com.laowan.jsonp.domain.PersonDomain; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * Created by wb-zhangkenan on 2016/12/1. */ @RestController @RequestMapping("/jsonp") public class JsonpTestController { @Autowired private PersonDomain personDomain; @RequestMapping(value = "/testJsonp",produces = MediaType.APPLICATION_JSON_VALUE) public PersonDomain testJsonp(){ return personDomain; } }
当发送的请求为：http://localhost:8003/jsonp/testJsonp?callback=callback的时候，返回的数据就是jsonp的；
当我们请求参数中不带callback的时候：http://localhost:8003/jsonp/testJsonp，返回的数据是json的。
利用Nginx解决跨域
通过反向代理服务器监听同端口，同域名的访问，不同路径映射到不同的地址，比如，在nginx服务器中，监听同一个域名和端口，不同路径转发到客户端和服务器，把不同端口和域名的限制通过反向代理，来解决跨域的问题。
通过Nginx反向代理，将跨域请求转变为非跨域请求，不同请求路径代理到不同的地址：
server { listen 80; server_name abc.com; #charset koi8-r; #access_log logs/host.access.log main; location /client { #访问客户端路径 proxy_pass http://localhost:81; proxy_redirect default; } location /apis { #访问服务器路径 rewrite ^/apis/(.*)$ /$1 break; proxy_pass http://localhost:82; } }
通过Nginx在请求头中添加CORS参数解决跨域
location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; if ($request_method = 'OPTIONS') { return 204; } }
利用CORS解决跨域问题
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
CORS核心参数介绍。
Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: X-Custom-Header Access-Control-Allow-Credentials: true Access-Control-Max-Age: 1728000
（1）Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
（2）Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
（3）Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。
更多原理可以参看： 阮一峰 写的跨域资源共享 CORS 详解
http://www.ruanyifeng.com/blog/2016/04/cors.html
spring boot中使用CORS
方式一：在需要指出跨域的Controller类或方法上添加@CrossOrigin注解
@CrossOrigin // 注解方式 @RestController public class HandlerScanController { @CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS, RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins="*") @PostMapping("/confirm") public Response handler(@RequestBody Request json){ return null; } }
方式二：配置CorsFilter，可以全局生效 （推荐）
/** * 实现基本的跨域请求 * @author linhongcun */ @Configuration public class CorsConfig { private CorsConfiguration buildConfig() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用 corsConfiguration.addAllowedHeader("*"); // 允许任何头 corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等） return corsConfiguration; } @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置 return new CorsFilter(source); } }
当然，如果微服务多的话，需要在每个服务的主类上都加上这么段代码，这违反了DRY原则，更好的做法是在zuul的网关层解决跨域问题，一劳永逸。
方式三：通过自定义WebMvcConfigurer重写addCorsMappings(CorsRegistry)实现全局跨域控制
这也是官网推荐的写法
@Configuration public class MyConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**"); } }; } }
总结
1、什么是跨域？为什么会产生跨域问题？
2、为什么前后端分离后容易产生跨域问题？
3、解决跨域有哪些方式？
参考：
https://blog.csdn.net/zknxx/article/details/53443181
