乐趣区

关于前端:什么是跨域-出现原因及解决方法

jiezi

1. 跨域是什么意思？

首先一个 url 是由：协定、域名、端口 三局部组成。（个别端口默认 80）
如：https://blog.moonlet.cn:80

当一个申请 url 的 协定 、 域名 、 端口 三者之间的 任意一个 与以后页面 url不同 即为 跨域 。
例如:

以后页面 url 被申请页面 url 是否跨域 起因
http://www.testlocation.com/ http://www.testlocation.com/i… 否 同源（协定、域名、端口号雷同）
http://www.testlocation.com/ https://www.testlocation.com/… 跨域 协定不同（http/https）
http://www.testlocation.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.testlocation.com/ http://blog.testlocation.com/ 跨域 子域名不同（www/blog）
http://www.testlocation.com:8… http://www.testlocation.com:7… 跨域 端口号不同（8080/7001）

————————————————

2. 跨域产生起因？

出于浏览器的 同源策略 限度。

    同源策略（Same Orgin Policy）是一种约定，它是浏览器外围也最根本的平安性能，它会阻止一个域的 js 脚本和另外一个域的内容进行交互，如果短少了同源策略，浏览器很容易受到 XSS、CSFR 等攻打。所谓同源（即在同一个域）就是两个页面具备雷同的协定（protocol）、主机（host）和端口号（port）。

非同源会呈现的限度

无奈读取非同源网页的 cookie、localstorage 等
无奈接触非同源网页的 DOM 和 js 对象
无奈向非同源地址发送 Ajax 申请

3.nginx 反向代理解决跨域（前端罕用）
正向代理：

a-->b 拜访不了，能够找个两头的服务器 c, 先拜访 c 再从 c 到 b, 相似曲线救国。明确拜访的目的地，然而用户不晓得两头的代理服务器。（疏忽两头服务器）

反向代理：a--> c <--b

 a 明确拜访 c 代理服务器，然而不晓得 c 的内容从哪里来，c 反向从别的中央拿来数据。(疏忽的是指标地址)

浏览器能够拜访 a, 而服务器之间不存在跨域问题，浏览器先拜访 a 的服务器 c，让 c 服务器作为代理去拜访 b 服务器, 拿到之后再返回数据给 a。

例如：

nginx 是动态服务器，跨域申请放在 api 上面好治理 http://www.baidu.com:80/api/user
能够在 nginx 上面的 config 上面的 nginx.conf 外面配置
从 80 端口进来的就拦挡一下，代理到 81 端口

server{
        location /api {
                // 拦挡一下
                proxy_pass  http://www.baidu.com:81;
    }
}

4. 增加响应头解决跨域

浏览器先询问 b,b 容许 a 拜访
access-control-allow-origin
access-control-max-age
PHP 端批改 header：

header('Access-Control-Allow-Origin:*');// 容许所有起源拜访
header('Access-Control-Allow-Method:POST,GET');// 容许拜访的形式

5. 通过 jsonp 解决跨域（老办法）

实现原理：通常为了加重 web 服务器的负载，咱们把 js、css、图片等动态资源拆散到另一台独立域名的服务器上，在 html 页面中再通过相应的标签从不同域名下加载动态资源，而被浏览器容许。

html 中有的标签人造反对跨域，比方 <script src=”http://www.baidu.com”></script> 然而只反对 get 申请。

退出移动版