携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第35天，点击查看活动详情
什么是跨域请求：就是a站点访问b站点，出现非同源策略请求
同源策略，是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。
协议、域名、端口号都相同，只要有一个不相同，那么都是非同源，就会出现跨域
1.非跨域的html标签
- img标签的src属性
- js文件
- css样式文件
2.新建一个corstest项目
ps:如果对于如何创建web项目不熟练的话，可以参考一下之前的文章，这边我就不多介绍了
掘金日新计划 · 8 月更文挑战第7天--spring-mvc创建
3.在webapp目录新增index.html文件和新增jquery-3.3.1.min.js文件
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="btnGetParam" value="发送get请求带参数">
<h1 id="btnGetParamText"></h1>
<h1 id="btnPostText"></h1>
<script>
$(function () {
$("#btnGetParam").click(function () {
$.ajax({
url:"http://localhost:8088/restfull/test/100",
type:"get",
dataType:"json",
success:function (res) {
$("#btnGetParamText").text(res.message+res.id)
}
})
})
})
</script>
</body>
</html>
代码说明：
添加一个id为btnGetParam的按钮，点击向http://localhost:8088/restfull/test/100 url获取参数，把返回值渲染在btnGetParamText
- jquery-3.3.1.min.js大家可以网络找一下下载到本地即可
4.设置tocat端口
5.重启项目(如果看到这个界面，说明创建成功)
6.点击按钮测试
提示了cors跨域请求
7.解决办法（8088项目是数据源提供方）
方法1(局部处理)：
- 在端口为8088项目新增允许8087端口项目的访问
- 重启项目(重启8088项目)
方法2(全局处理)：
- 在端口为8088项目的src/main/resources/applicationContext.xml新增配置
<mvc:cors>
<mvc:mapping path="/restfull/**" allowed-origins="http://localhost:8087"/>
</mvc:cors>
代码说明：
path表示哪一个请求目录
allowed-origins表示允许哪一个域名。如果多个域名，使用逗号分隔 如：
allowed-origins="http://localhost:8087,http://www.baidu.com"
