什么是跨域
跨域是指 不同域名之间相互访问。即浏览器控制当前网页下不能执行其他网站的脚本，这是由浏览器的同源策略造成的，是浏览器对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="" target="_blank">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
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
