1.前言
以前做项目 ，基本上是使用 MVC 模式 ，使得视图与模型绑定 ，前后端地址与端口都一样 ，
但是现在有些需求 ，需要暴露给外网访问 ，那么这就出现了个跨域问题 ，与同源原则冲突，
造成访问失败 ，于是出了个CORS策略 ，
引用官方解释：
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出ajax请求，从而克服了AJAX只能 同源使用的限制。
CORS依赖于服务器端的设定，只要在服务器端进行了设置，就可以实现相应的资源访问。
它允许浏览器向跨源服务器，发出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 <!--<p>点击 去home.html页面</p>--> <hr> <label> 发送的内容： <input id="text" type="text"> </label> <button onclick="dosome()">点我，发送信息</button> <hr> 返回的结果：<span id="res"></span> <!--<link href="/js/jquery-1.11.1.min.js" rel="stylesheet"/>--> <!--当前路径是/html/** ,因此需要返回一级 ，所以用 ../js/ --> <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>
（2）后端该怎么写呢？
其实很简单
如果是spring boot ，直接使用 注解@CrossOrigin即可
如果是 springMVC 则使用 设置响应头 即可 ，当然，spring boot 也是兼容这个方法的
源码
【如果项目设置了spring security ，需要其他配置，在我的其他随笔有详细记载】
但是
注意：返回的数据需要与前端对应，否则前端无法获取返回结果
什么意思呢？
比如前端设置的返回数据类型是 json
那么后端要么返回jsonp，要么返回 Map 、List<Map>、po实体类， 不然前端无法识别数据，
比如返回String类型会造成 前端json类型解析不出来
4.测试
启动项目
端口5601 ，访问网址 http://localhost:5601/html/index.html
输入文字 ，点击发送 ，向端口8001 发送请求 ，希望得到处理结果
成功。。。撒花 ！！！