spring boot 解决跨域的两种方法 -- 前后端分离

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.前言

以前做项目，基本上是使用 MVC 模式，使得视图与模型绑定，前后端地址与端口都一样，

但是现在有些需求，需要暴露给外网访问，那么这就出现了个跨域问题，与同源原则冲突，

造成访问失败，于是出了个CORS策略，

引用官方解释：

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出ajax请求，从而克服了AJAX只能同源使用的限制。

CORS依赖于服务器端的设定，只要在服务器端进行了设置，就可以实现相应的资源访问。

网上找了很多解决方式，有后端方案、有<link>标签方案等，质量参差不齐，甚至直接是转载连测试都不做，一时半会让我费解好久。。。

2.跨域失败根本原因

其实所谓的跨域问题，仅仅是局限于前端页面【脚本或表单】访问了与该前端主机地址【包括ip和端口】不一样的远程后端接口，其实该前端的请求是成功发送到了远程后端，

但是因为请求头信息原因，远程后端检查出请求来源的前端页面的主机地址【包括ip和端口】不是自己的本地的地址，因此拒绝了该请求。

因此，跨域问题的关键不是前端设置，而是后端设置，前端不需要改动。

【后端与后端地址不同是可以相互访问的，不存在跨域问题，不然做 spring cloud 分布式微服务框架岂不是被烦死？== 】

3.解决操作【适用于spring boot 与 spring MVC】

我准备了两个工程，端口5601负责前端，端口8001 负责后端

（1）看一下前端源码，前端5601 向端口8001 发送请求，如果直接发送请求，必然报错

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
你好，世界，2333

<hr><label>
发送的内容：
<input id="text" type="text">
</label>
<button onclick="dosome()">点我，发送信息</button>
<hr>
返回的结果：<span id="res"></span>

<script src="../js/jquery-1.11.1.min.js" ></script>
<script>
function dosome() {
let text = $("#text").val();
if (text.trim() == "") {
alert("不能为空");
return;
}
//URL是URI的子集，所有的URL都是URI，但不是每个URI都是URL，还有可能是URN。
let url = "http://localhost:8001/getname";
$.ajax({
async: true,
type: 'post',
data: {"name": text},
//这里类型是json，那么跨域的后端需要是map类型、po实体类等 json类型才能接收数据
dataType: "json",
url: url,
success: function (data) {
console.log(data);
//请求成功回调函数
if (data != null) {
// alert("有数据返回")
$("#res").html(JSON.stringify(data))
} else {
alert("系统异常")
}
}
});
}</script>
</body>
</html>