前端跨域的场景及解决方法

跨域的场景：

1.域名不同 （www.yangwei.com 和www.wuyu.com 即为不同的域名）

2.二级域名相同，子域名不同 （www.wuhan.yangwei.com www.shenzheng.yangwei.com 为子域不同）

3.端口不同，协议不同 （ http://www.yangwei.com 和https://www.yangwei.com属于跨域www.yangwei.con:8888和www.yangwei.con:8080)

跨域的解决方式:

jsonp:

利用script标签，请求任意跨域地址的资源，
返回资源只要content-type为application/javascript，并且返回回来的数据为调用一个js
function，数据则包裹在方法内部，这个js
function需要在本地的代码中提前准备好，一但准备的游离script标签src被附上值并且插入到dom
tree当中之后，浏览器就会对这个src进行请求，拉回来的代码直接执行，跨域成功！

但是script标签会有一个限制，就是它只支持get方法，如果用户的请求会带有一些隐私数据的话，需要改用post方式，不是没有办法，html中有form
tag可以支持post提交，只需要新建一个form tag，
内部包含几个input输入框，输入框name就是想提交的数据的key，form的action就为提交的地址，为防止提交动作后跳转到action地址去，需要利用target属性指向一个空的iframe就不会跳转了，最后吧form的method属性设置为post，最后添加一个input
type为submit，调用form dom的submit方法，就可以提交数据了

cors跨域(cross origin resource share):

依赖于XMLHttpRequest对象 分两种情况： 简单请求 请求方式只限于：GET，POST，HEAD
请求头只包含以下几种：content-language, content-type, accept, accept-language,
(width, DPR, DOWNLINK, save-data, viewport-width),
其中content-type限制为text/plain，multipart/form-data，application/x-www-form-urlencoded，就是form表单的enctype支持的三种编码方式，表现上来说第一种是空格变成+，第二种是完全不处理，后台方便对数据进行流对象来操作数据，第三种是对所有的字符串都进行编码，是默认值
当然请求头还会加上Origin参数表示请求来源

浏览器判断是否跨域会根据返回头中的access-control-allow-origin进行判断, 没有的这个返回头浏览器就会判断为跨域,
对返回数据进行屏蔽, 表现就是状态为fail, 看不到响应头

复杂请求 会先发送一个预检请求, 请求头包括access-control-request-method,
access-control-request-headers, 第一个是为了验证请求方法是否被服务器支持,
第二个是为了验证请求的请求头是否被支持,这里只加入非简单请求范围内的请求头

返回响应头会包括: access-control-allow-origin, access-control-allow-methods,
access-control-allow-headers, access-control-max-age, 四种

然后再进行真正的请求, 请求端请求依旧会带上access-control-request-method,
access-control-request-headers, 但是返回头就只包括的access-control-allow-origin

如果要携带cookie, 那么需要在请求头上带上cookie请求头, 把cookie带在这个请求头上,
然后服务器返回access-control-allow-credential, 外加set-cookie字段, 这种请求要求
access-control-allow-origin不能为*

客户端只能拿到一些基本的响应头,
包括Cache-Control(控制缓存)、Content-Language(控制语言)、Content-Type(控制文本类型)、Expires(控制缓存,
优先级低于cache-control)、Last-Modified(控制协商缓存)、Pragma(也是控制缓存),
其他的头要想拿到都需要响应头指定access-control-expose-headers

nginx跨域转发

这个比较容易, 只需要在该域名的服务器下面配一个nginx代理, 在其对应的url的location下面加一个proxy_pass即可,
不受跨域限制

iframe跨域

设置document.domain, 文档流跨域; 利用postMessage跨域,
子窗口向父窗口postMessage或者父窗口向子窗口postMessage即可