跨域问题及解决方案

---

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