在归纳之前，有少量关于跨域的说法是模糊的。什么jsonp，跨域原理，脑子里只有一个大概的说法。我知道这个东西，然后用的时候直接用百度Ctrl+C。后来有空的时候，我决定整理一波这些知识点。我需要知道原因。 模糊状态:同一个跨域域名，同一个端口号，同一个协议是什么？那么以上条件只有一个不同，都视为不同的来源，就会出现跨域问题。 为什么会出现这个问题？由于浏览器的同源策略 简而言之:同源策略限制了从同一来源加载的文档或脚本如何与来自另一来源的资源进行交互。 这是隔离潜在恶意文件的重要安全机制。 这个安全机制大致限制了两个方面:一是对接口的请求:CSRF攻击。 有一天你登录你的银行账户操作XXX，那么当你访问一些非法网站的时候，如果没有同源的策略，它会向银行的接口发出请求(浏览器会自动带来相关的cookies)。假设银行的服务器根据cookies判断登录状态，非法网站就相当于登录了你的银行账户...................................................................................... 有一天，你的邮箱里收到一封邮件，说你的银行账户有危险，然后你点进去看看。这与之前的登录页面完全相同，您立即输入了您的帐户密码...该页面实际上是一个内嵌iframe<的钓鱼网站:& lt；/iframe & gt；//由于没有同源策略的限制，钓鱼网站可以直接从其他网站获取DOM constit frame = window . frames['尹航']constnode = iframe . document . getelementbyid('输入你的账号密码')console.log (node)//OK。然后，其实是浏览器对我们的一种保护。 那么，问题来了。怎么才能确定门外的人是好人还是坏人？浏览器给坏人关了一扇门，给好人留了一扇窗。 好人的跨域方式。好人卡接口请求的jsonpJSONP与JSON无关..就像JavaScript和Java一样，浏览器对Script和img没有限制(这些标签都是GET请求的，所以JSONP不支持POST)，所以我们可以这样做前台代码 CB = function(RES){ console . log(RES)} & lt；/script & gt；& lt！-传入数据是msg，传入一个回调方法CB-->:& lt；script src = ' http://xxxxx/API/jsonp？你好，世界。CB = CB ' type = ' text/JavaScript ' & gt。& lt/script & gt；同样，服务器返回staticsyncJSONP(CTX){//从前台获取参数const query = ctx.request.query//query.cb从前台获取cb字段。 //因为前台是用script标签发起请求的，//前台请求的资源实际上是这样一段js代码cb(服务器返回的数据)，所以前台直接执行了ctx.body = `$ {query.cb}(服务器返回的数据)接口请求的CORS跨域CORS(跨源资源共享)跨域资源共享，定义了访问时必须进行跨域资源共享。 CORS的基本思想是利用自己的HTTP头让浏览器与服务器进行通信，从而决定请求或响应应该成功还是失败。 目前所有浏览器都支持该功能，IE浏览器不能低于IE10。 整个CORS沟通过程由浏览器自动完成，无需客户参与。 对于开发者来说，CORS通信和同源的AJAX通信没什么区别，代码完全一样。 一旦浏览器发现AJAX跨源请求，会自动添加少量额外的头信息，有时会增加一个额外的请求，但客户不会感觉到。 因此，实现CORS通信的关键是服务器。 只要服务器实现了CORS接口，它就可以跨源进行通信。 服务器主要通过设置访问控制允许来源来支持CORS。 如果浏览器检测到相应的设置，就可以允许Ajax跨域访问。 有关跨域资源共享CORS的更多信息，可以在浏览器中查看相应的响应标头。例如，下面的chestnut服务器允许CORS，服务器需要为接口设置一系列响应头。该字段必须是 设置请求的域名。多个域名之间用逗号分隔，也可以设置为*，即允许所有源访问access access-control-allow-origin:http://www.YOURDOMAIN.com。该字段必须是 设置允许请求的方法，多个方法用逗号分隔access-control-allow-methods:get，post，put，delete，options该字段是可选的。 允许请求设置自己的请求头字段。多个字段用逗号分隔。access-control-allow-headers:authorization该字段是可选的。 设置cookies是否可以发送access-control-allow-credentials:true Browser将CORS请求分为两类:简单请求和不那么简单的请求。 1.目前，对于简单的请求，大多数情况下采用这种方法。 简单的请求只需要设置Access-Control-Allow-Origin。 满足以下两个条件，是一个简单的要求。 方法是这三种方法之一:HEAD，GET，http头不超过以下字段:accept accept-language content-language last-event-id content-type:only三个值application/x-www-form-urlencoded，multipart/form-data，text/ Plain2。非简单请求非简单请求将发出预检测请求，返回代码为204。只有在预检测通过的情况下，才会真正发出请求，返回200。 我们来看栗子:204预检测非简单请求，根据不同情况需要不同的响应头。上面的接口请求中显示了一系列响应头配置项。相信说代理跨域并不陌生。我们还是用前端域名请求，然后一个中介——代理把这个请求转发给真正的后端域名，所以不存在跨域的问题。 常见的Nginx可以简单配置。 了解更多配置信息:nginx讲解server{ #监听端口9099监听9099；#本地域名是localhost server _ name localhost#每当localhost:9099/api长这样，就会转发到真实的服务器地址http://baidu.com位置~/API { proxy _ pass http://baidu.com；}}然后前台的请求地址是http://localhost:9099/api/xxx，然后Nginx用localhost:9099/api的地址监听请求，再转发到真实的服务器地址http://baidu.comCORS的用途和JSONP一样，但是比JSONP更强大。 JSONP只支持GET请求，CORS支持所有类型的HTTP请求。 jsonp的优势在于支持老浏览器，当服务器同意JSONP时，可以向不支持CORS的网站请求数据。 Nginx可以说是最方便的，但是需要部署Nginx，需要对服务器有一定的了解，不适合新手。当然，你也可以请后端同学帮你部署。 就像了解一些跨窗口操作DOM，Postmessage Window一样。Postmessage (data，origin)是HTML5的一个接口，重点实现不同窗口和页面的跨域通信。 参数描述要传输数据的origin字符串参数，表示目标窗口的来源，协议+主机+端口号[+URL]，URL会被忽略，不用写。这个参数是出于安全考虑，postMessage()方法只会将消息传输到指定的窗口。当然，如果你愿意，可以将参数设置为“*”，可以传输到任何窗口，如果你想指定与当前窗口相同的原点，则设置为“/”。 现在就是这样的情况，因为b.html在同源策略的限制下无法操作iframe(b.html)中的dom，所以使用postMessage可以处理这种情况 例如，主域名是http://baidu.com/:8888,，子域名是http://child.baidu.com/:8888.。在这种情况下，您可以为两个页面设置相同的document.domain，即document。域= Baidu.com来访问它们各自的窗口对象。 不要再问我跨域的问题了。看完可以假装开心。