1.跨域是什么意思?

首先一个url是由:协议、域名、端口 三部分组成。(一般端口默认80)
如:https://blog.moonlet.cn:80
当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。

当前页面url 被请求页面url 是否跨域 原因
https://blog.moonlet.cn https://blog.moonlet.cn/archives/550 同源(协议、域名、端口号相同)
http://blog.moonlet.cn https://blog.moonlet.cn/archives/550 跨域 协议不同(http/https)
https://blog.moonlet.cn https://www.baidu.com 跨域 主域名不同
https://blog.moonlet.cn https://www.moonlet.cn 跨域 子域名不同(www/blog)
https://blog.moonlet.cn:80 https://blog.moonlet.cn:8080 跨域 端口号不同(80/8080)

2.跨域产生原因?

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

同源策略(Same Orgin Policy)是一种约定,它是浏览器核心也最基本的安全功能,它会阻止一个域的js脚本和另外一个域的内容进行交互,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。。所谓同源(即在同一个域)就是两个页面具有相同的协议(protocol)、主机(host)和端口号(port)。

非同源会出现的限制

  1. 无法读取非同源网页的cookie、localstorage等
  2. 无法接触非同源网页的DOM和js对象
  3. 无法向非同源地址发送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请求。