title: 跨域
date: 2021-08-31 14:28:41
tags: 前端知识
description: 跨域问题解决方案
1. 跨域问题
浏览器的同源策略: 浏览器只能访问与包含它的页面处于同一个域内的资源
2. JSONP (参数式JSON)
只支持GET请求
jsonp由回调函数和数据组成,回调函数是当响应到来时应该在页面中调用的函数,数据是传入回调函数中的JSON数据
function handleResponse(response) {
alert(response.name);
}
// jsonp通过动态script元素使用
var script = document.createElement('script');
// src属性指定一个跨域URL
script.src = "https://www.xxx.com/json/?callback=handleresponse";
document.body.insertBefore(script,document.body.firstChild);
3. CORS (跨域资源共享)
关键是服务器实现CORS的接口
-
简单请求:浏览器直接发出CORS请求,在请求头中增加Origin字段
请求的方法只能是HEAD GET POST
头部信息字段有限
-
非简单请求: 在发送请求之前,增加一次HTTP请求——预检
请求方法为PUT DELETE
Content-Type字段的类型是application/json
4. 面试
跨域是因为浏览器的同源策略导致的不同协议,域名,端口之间的资源无法正常访问的问题。主要解决方法有 JSONP 和 CORS。
JSONP 的话主要是通过动态生成的 script 标签带上回调函数的名字,传给后台,后台将数据包裹在回调函数里面返回前台,然后执行回调函数。
CORS 的话要求浏览器和服务器都支持这个功能,然后浏览器就可以发送简单请求和非简单请求。
对于简单请求来说,浏览器直接发送请求,请求中携带 Origin 字段。如果该字段在服务器允许的列表中,则服务器响应该请求,并在响应头里面带上 Access-Control-Allow-Origin。若不在的话,则会被请求的 onerror 函数捕获。
对于非简单请求,浏览器先发送 option 预检请求并带上请求的方法和参数,如果服务器允许这些方法和参数,会返回对应的请求。如果不允许的话,会发送一个正常的 HTTP 响应,但是这个响应中没有 CORS 相关的信息。然后预检通过的话,浏览器就像发送简单请求一样发送请求。
JSONP 与 CORS 的区别
主要区别就是 JSONP 只能发起 get 请求,而 cors 可以发起任何请求
其他可以跨域的标签
img 和 iframe,所有具有 src 属性的都可以
其他跨域方式
Web Socket