# demo-cross-origin

**Repository Path**: fosonmeng/demo-cross-origin

## Basic Information

- **Project Name**: demo-cross-origin
- **Description**: （已关闭）Demo for cross-origin on browser operations。
- **Primary Language**: HTML
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-21
- **Last Updated**: 2021-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

跨域示例
------

## 环境

* 主机Hosts

    ```conf
    127.0.0.1   localhost.test server1.localhost.test server2.localhost.test localhost.localdomain
    ```

* 生成 _server.cert_ 和 _server.key_

    ```bash
    openssl req -nodes -new -x509 -keyout server.key -out server.cert
    ```

* 在 Google Chrome 中, 选择 _高级_ -> _允许通过连接_


## 跨域场景

<!-- ✓✕ -->

* 同一域名，不同文件或路径

    http://localhost.test:4001 ✓ http://localhost.test:4001/hello

* 同一域名，不同端口

    http://localhost.test:3999 ✕ http://localhost.test:4001/hello

* 同一域名，不同协议

    http://localhost.test:4001 ✕ https://localhost.test:4430/hello

* 域名和域名对应相同ip

    http://localhost.test:4001 ✕ http://127.0.0.1:4001/hello

* 不同域名

    http://localhost.test:4001 ✕ http://localhost.localdomain:4001/hello

### 在谷歌浏览器中

![localhost-test-3999](images/localhost-test-3999.png)

![localhost-test-4001](images/localhost-test-4001.png)


## 跨域方式

### jsonp

![jsonp](images/jsonp.png)

### document.domain + iframe

![domain](images/domain.png)

### location.hash + iframe

![hash](images/hash.png)

### window.name + iframe

![name](images/name.png)

### postMessage

![postMessage](images/postMessage.png)

### CORS

![cors](images/cors.png)

### WebSocket

![webSocket](images/webSocket.png)