一、什么是跨域1、跨域的概念 同一个源下的资源与另一个源下的资源进行交换。切记跨域仅仅是针对浏览器而言的，像两个服务端之间执行http请求的则不属于跨域。 跨域出现的场景： 1、前后端分离情况下，前台请求不同源的后台服务 2、微服务下，服务实例在多个不同源的服务上 3、资源共享，公共的静态资源如图片，音频视频等存放在一个...
一、什么是跨域
1、跨域的概念
同一个源下的资源与另一个源下的资源进行交换。切记 跨域仅仅是针对浏览器而言的，像两个服务端之间执行http请求的则不属于跨域。
跨域出现的场景：
1、前后端分离情况下，前台请求不同源的后台服务
2、微服务下，服务实例在多个不同源的服务上
3、资源共享，公共的静态资源如图片，音频视频等存放在一个服务中，其他web页面访问该服务获取资源（其他web页面与存放静态资源的服务不同源）
2、为什么出现跨域
浏览器的同源 : 浏览器针对 相同的协议（http、https），相同的ip,端口（port）,或者域名相同的两个页面，则认为这两个页面为同源,例如 http://www.baidu.com/aaa.html 和http://www.baidu.com/bbb.html即可以被浏览器认为这两个页面为同源。而如下http://www.baidu.com/aaa.html 和http://www.58.cn/bbb.html即可以被浏览器认为这两个页面不同源。
浏览器的同源策略为：为了安全考虑，浏览器限制了同一个源加载的文档或脚本不允许与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
二、模拟跨域
- 本机启动两个程序，将其端口设置为不同，则这两个应用程序即为不同源的应用程序，两个应用程序分别为127.0.0.1:7070(A应用)和127.0.0.1:7071（B应用）
A应用的前台页面为
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>跨域测试</title>
</head>
<body>
<div class="container">
<div class="starter-template">
<!--标签的单击事件 所属应用A调用ajax操作访问应用B的api (属于跨域请求)-->
<input id="btn" type="button" value="跨域获取数据" onclick="test_ajax_cors()"/>
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</div>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/home.js}"></script>
</body>
</html>对应的js
//使用ajax 进行跨域请求
function test_ajax_cors(){
$.ajax({
method : 'get',
url : 'http://127.0.0.1:7071/jsonp',
success : function (message) {
alert(message);
},
async : true
})
}直接访问7071返回数据
通过应用A页面(应用A再跨域访问应用B)访问出现如下：
跨域请求常见错误 ，其实在使用ajax启动另一个同源应用的时候，请求已经到达了该应用，但是在响应到浏览器后，浏览器进行解析的时候基于同源安全策略抛出上图的错误。
最低0.47元/天 解锁文章
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
