2019最新前端跨域与解决方法详解(4种)

最新推荐文章于 2025-03-13 01:17:27 发布

长沙黑马小知老师

最新推荐文章于 2025-03-13 01:17:27 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 java python ui 互联网 it 程序员

本文链接：https://blog.youkuaiyun.com/tangjing556/article/details/91984494

it 同时被 3 个专栏收录

10 篇文章

订阅专栏

程序员

10 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

(有其他资源需求可以加我微信csheima7或者qq2832281573)

## 什么是跨域？

在介绍跨域之前，我们先来了解下一个域名地址的组成：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190601131136500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb2R1bl8yMDEz,size_16,color_FFFFFF,t_70)

JS 出于安全方面的考虑，不允许跨域调用其他页面的对象，那什么是跨域呢，简单地理解就是因为浏览器同源策略的限制，a.com 域名下无法操作 b.com 或是 c.a.com 域名下的对象。

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。例如：http://www.itcast.cn/index.html 请求 http://www.itheima.com/path/to/api。

> 注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

大家可以参照如下表格来理解跨域：

| # | URL | 说明 | 是否允许通信 |

| :--- | :---------------------------------------------------------- | :--------------------- | :----------- |

| 1 | http://www.a.com/a.js<br />http://www.a.com/b.js | 同一域名下 | 允许 |

| 2 | http://www.a.com/lab/a.js<br />http://www.a.com/script/b.js | 同一域名下不同资源地址 | 允许 |

| 3 | http://www.a.com:8080/a.js<br />http://www.a.com/b.js | 同一域名，不同端口 | 不允许 |

| 4 | http://www.a.com/a.js<br />https://www.a.com/b.js | 同一域名，不同协议 | 不允许 |

| 5 | http://www.a.com/a.js<br />http://20.33.23.61/b.js | 域名与域名对应的IP | 不允许 |

| 6 | http://www.a.com/a.js<br />http://script.a.com/b.js | 主域名相同，子域名不同 | 不允许 |

| 7 | http://www.a.com/a.js<br />http://a.com/b.js | 主域名相同，子域名不同 | 不允许 |

| 8 | http://www.itcast.cn/a.js<br />http://www.a.com/b.js | 不同域名 | 不允许 |

补充说明：

- 如果是协议和端口造成的跨域问题“前台”是无能为力的。

- 在跨域问题上，域仅仅是通过”URL 的首部”来识别，而不会根据域名对应的IP地址是否相同来判断。如上表中的范例5，“URL的首部”可以理解为“协议,、域名、端口”。

## 什么是同源策略及其限制？

同源策略限制一个源的资源（文档或脚本）如何与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息、防止身份伪造等。

同源策略限制内容有：

- Cookie、LocalStorage、IndexedDB 等存储性内容

- DOM 节点

- AJAX 请求不能发送

但是有三个标签是允许跨域加载资源的：

1. `<img src="path/to/xxx">`

2. `<link href="path/to/xxx">`

3. `<script src="path/to/xxx"></script>`

## 处理跨域的方法

所有的跨域都必须经过对方的允许。如果未经允许即可获取，那是浏览器同源策略出现漏洞。

### 方法1：JSONP

#### 原理

利用 `<script>` 标签的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。

#### 与 AJAX 对比

JSONP 和 AJAX 相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但 AJAX 属于同源策略，JSONP 属于非同源策略（跨域请求）。

#### 优缺点

优点：兼容性好，可用于解决主流浏览器的跨域数据访问的问题。

缺点：仅支持 GET 方法，具有局限性。

#### 流程

声明一个回调函数，其函数名 (如 fn) 当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据 (服务器返回的 data)。

2. 创建一个 `<script>`标签，把那个跨域的 API 数据接口地址，赋值给 script 的 src，还要在这个地址中向服务器传递该函数名（可以通过问号传参 `?cb=fn`）。

3. 服务器接收到请求后，需要进行特殊的处理，把传递进来的函数名和它需要给你的数据拼接成一个字符串，例如：传递进去的函数名是 fn，它准备好的数据就是 `fn([{"name":"heima"}, ...])`。

4. 最后服务器把准备的数据通过 HTTP 协议返回给客户端，客户端执行其响应数据，调用之前已经声明好的函数（fn），对返回的数据进行操作。

```html

function fn(data) {

console.log(data);

}

</script>

```

其中 fn 是客户端注册的回调的函数，目的获取跨域服务器上的 JSON 数据后，对数据进行在处理。

最后服务器返回给客户端数据的格式为：

```html

fn([{"name":"heima"}, ...])

```

由于是 `script` 标签请求的，所以这里会当做 JS 来执行，就会调用到之前已经声明好的 fn 函数了。

#### jQuery 的 JSONP 形式

```javascript

$.ajax({

url: "http://crossdomain.com/jsonServerResponse",

dataType: "jsonp",

type: "GET", // 可以省略

jsonp: "cb", // 函数名形参，默认为 callback

jsonpCallback: "fn", // 函数名，默认 jQuery 自动生成

success: function (data) {

console.log(data);

}

});

```

### 方法2：CORS (跨站资源共享)

#### 原理

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。

浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

#### 优缺点

优点：功能更加强大支持各种 HTTP Method

缺点：兼容性不如 JSONP

CORS 要求浏览器 (> IE10) 和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。

范例：网站 `http://localhost:6000/` 要请求 `http://localhost:3000/user/list`，list 页面返回 JSON 字符串格式：`{ name:'heima', gender:'male', age:18 }`：

```javascript

router.get("/user/list", function (req, res, next) {

var user = { name: 'heima', gender: 'male', age: 18 };

// 这一句

res.writeHeader(200, { "Access-Control-Allow-Origin": "http://localhost:6000" });

res.write(JSON.stringify(user));

res.end();

});

```

在响应头上添加 `Access-Control-Allow-Origin` 属性，指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了 CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

### 方法3：WebSocket

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。

WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

原生 WebSocket API 使用起来不太方便，我们使用 Socket.io，它很好地封装了 webSocket 接口，提供了更简单、灵活的接口，也对不支持 webSocket 的浏览器提供了向下兼容。

前端代码：

```html

<div>user input：<input type="text"></div>

var socket = io('http://www.domain2.com:8080');

// 连接成功处理

socket.on('connect', function () {

// 监听服务端消息

socket.on('message', function(msg) {

console.log('data from server: ---> ' + msg);

});

// 监听服务端关闭

socket.on('disconnect', function () {

console.log('Server socket has closed.');

});

document.getElementsByTagName('input')[0].onblur = function() {

socket.send(this.value);

};

</script>

```

Node.js 后台代码：

```javascript

var http = require('http');

var socket = require('socket.io');

// 启动HTTP服务

var server = http.createServer(function (req, res) {

res.writeHead(200, {

'Content-type': 'text/html'

});

res.end();

});

server.listen('8080');

console.log('Server is running at port 8080...');

// 监听socket连接

socket.listen(server).on('connection', function (client) {

// 接收信息

client.on('message', function (msg) {

client.send('hello：' + msg);

console.log('data from client: ---> ' + msg);

});

// 断开处理

client.on('disconnect', function () {

console.log('Client socket has closed.');

});

```

### 方法4：postMessage

如果两个网页不同源，就无法拿到对方的 DOM。典型的例子是 iframe 窗口和 `window.open` 方法打开的窗口，它们与父窗口无法通信。HTML5 为了解决这个问题，引入了一个全新的 API：跨文档通信 API（Cross-document messaging）。这个 API 为 window 对象新增了一个 `window.postMessage` 方法，允许跨窗口通信，不论这两个窗口是否同源。

`postMessage` 方法参数列表：

- 第一个参数是具体的信息内容

- 第二个参数是接收该消息的窗口的源（origin），即："协议 + 域名 + 端口"，也可以设为 `*`，表示不限制域名，向所有窗口发送。

范例： `http://localhost:6000/index.html`页面向 `http://localhost:3000/index.html`传递“跨域请求信息”

发送信息页面 `http://localhost:6000/index.html` 代码：

```html

<head>

</head>

<body>

</body>

</html>

function run() {