HTTP跨域

1.什么是跨域？

有浏览器同源策略限制的一类请求场景，当不同地址、不同端口、不同级别、不同协议就会构成跨域。

如图所示： image.png

2. 什么是同源策略?

所谓同源是指：协议+域名+端口 三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
它是浏览器最核心也是最基本的安全技能，如果缺少了同源策略，浏览器很容易受到xss、CSFR等攻击。

同源策略是浏览器的行为，为了保护本地数据不被请求回来的数据污染，拦截的是请求回来的请求数据，服务器响应了数据，但是被 同源策略拦截。
图示：

image.png

3.解决跨域问题？

同源策略出于安全考虑，限制了一下行为：Cookie，loacalStory，IndexDB 无法读取，Dom和JS对象无法读取，ajax请求发不出去。

• 这三个标签允许跨域加载资源：

<img src="XXX"/>
<script src="XXX"/>
<link href="XXX"/>

• 提示：

跨域不是请求发不出去，是请求发出去了，服务端能正常收到请求并响应结果，只是结果被浏览器拦截了。
表单方式可以发送跨域请求是因为它不会获取新的内容，所以它可以发送请求，这也说明了跨域并不能完全阻止CSRF(跨站请求伪造，是一种挟制用户在已登录的web应用程序上执行非本意的操作的攻击方式)，因为阻止的只是响应信息。

3.1解决跨域

1. 通过JSONP跨域

仅支持get方法具有局限性，不安全可能会遭受XSS攻击(恶意代码注入)。

    $.ajax({
    url:'http://myapp.com/jsonServerResponse',
    dataType:'jsonp',
    type:'get',  //可以省略
    jsonCallback:'show',   //自定义传送给服务器的函数名，而不是使用jQuery自动生成的，可忽略
    jsonp:'callback',  //把传递函数名的形参设定，可忽略。
    sucess:function(data){
    console.log(data)
    }

2 CORS解决跨域

cors需要浏览器和后端同时支持，IE8/9需要通过XDomainRequest来实现。
服务端需要设置Access-Control-Allow-Orign就可以开启CORS，该属性表示那些域名可以访问资源，如果设置通配符，即所有的资源都可以访问。
虽然设置CORS和前端没有什么关系，但是通过这种方式会出现两种情况，分别是简单请求和复杂请求。

• 1.简单请求：
  只要同时满足以下两大条件，就属于简单请求
  条件1： 使用下列方法之一： GET/HEAD/POST
  条件2：Content-type的值仅限于下面三者之一：text/pain, multipart/form-data, application/x-www-from-urlencode。
• 2. 复杂请求：
     不属于简单请求即是复杂请求，复杂请求的CORS设置，会在正式通信之前，增加一次HTTP查询请求，成为预检请求，该请求是option的，通过该请求来知道服务端是否允许跨域请求。
     withCredentials： CORS请求默认不发送cookie和HTTP认证信息，如果要把Cookie发到服务器，一方面需要服务器的同意，指定Access-Control-Allow-Credentials 字段设置为true，另外一方面，开发者需要在AJAX请求中打开withCredentials属性。

3. 代理

ngnix配置

        server{
            # 监听9099端口
            listen 9099;
            # 域名是localhost
            server_name localhost;
            #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
            location ^~ /api {
                proxy_pass http://localhost:9871;
            }    

其他跨域方法

1、 document.domain + iframe跨域

2、 location.hash + iframe跨域

3、 window.name + iframe跨域

4、 postMessage跨域

5、 nodejs中间件代理跨域

6、 WebSocket协议跨域

4.附加内容

常见状态码

1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。

具体

常见状态码

200 OK：客户端请求成功。
301：永久转移，如换域名时常使用，用户访问老域名时自动跳转到新域名
302：资源暂时转移，很多短链接跳转长链接，都是使用302

400 Bad Request：客户端请求有语法错误，未被服务端理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器接收到请求，但拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。大部分后端业务代码出现异常
502 Bad Gateway 网关错误：ngnix收到请求，但请求没打过去，可能因为业务服务挂了，或者打过去的端口号写错了
503 Server Unavailable：服务器当前不能处理客户端请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。
504 Gateway Timeout 网关超时 ： 通常因为服务器处理太久，导致超时，如PHP服务默认的请求响应最长时间是30s，如果超过就会挂掉