跨域如何解决—阿楠

跨域问题如何解决

	1、浏览器限制
	2、跨域（域名，端口不一样都是跨域）
	3、XHR（XMLHttpRequest请求）
	同时满足三个条件才有可能产生跨域问题。

怎么解决？
devserver/proxy

  		 vue和react中proxy跨域
	    只能在开发环境下使用
	    打包上线以后
	    通过nginx反向代理配置就可以了

JSONP

	   原理：利用script标签绕过同源策略，获得一个js函数调用
	    jsonpcallback是页面存在的回调方法
	    而数据就以函数参数的形式保存在callback函数参数中。
	    缺点：仅仅支持get请求

CORS

要实现cors通信，主要是在服务器，目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
浏览器将请求分为两类，一类是简单请求，一类是非简单请求，满足下列条件的就是简单请求，否则			即使非简单请求：
条件：
    1、请求方式：HEAD、GET、POST
    2、请求头信息：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

非简单请求：两次请求，在发送数据之前会先发第一次请求做预检，只有预检通过后在发一次请求作为数据传输。
关于预检：

请求方式：OPTIONS
    - “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
    - 如何“预检”
         => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
            Access-Control-Request-Method
         => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
            Access-Control-Request-Headers    

• CORS优缺点

CORS的优点：可以发任意请求
CORS的缺点：上是复杂请求的时候得先做一个预检，再发真实的请求，发了两次请求会有性能上的损耗。