1.由于浏览器有同源策略,(相同协议,相同ip,相同端口)才能访问,由此导致出现跨域问题
2.跨域的解决方法常见的有Jsonp, 以及nginx代理
3.问题:1.禁止跨域到底是浏览器禁止的,还是服务器拒绝的 2.如果Nginx代理网站后,为什么访问Nginx代理的端口的就不会出现跨域呢(Nginx端口肯定也是独立的啊)
4.问题:为什么跨域请求有时候会有两次请求,其中一次是optin,请求然后才是正确的请求
解答:
关于上边的问题解答如下:
2.1.跨域jsonp解决方案是利用script 标签支持跨域加载,但是script 都是通过get请求,因此josnp 发送的都是get请求,因此无法post数据
2.2 nginx 代理能解决跨域是因为:向代理服务器的nginx发起请求时候,nginx的配置中响应头中允许了跨域请求(即增加响应头:'Access-Control-Allow-Origin', '*'),然后nginx 收到请求后会通过代理的请求方式向目标服务器发器请求,然后将数据返回给客户端,从而解决了跨域问题
3.1 :跨域是浏览器通过拦截禁止的,跨域请求发生后,服务器端可以收到跨域的请求并能返回正确的数据,但是如果服务器端未设置允许跨域,则浏览器收到数据时候发现不允许跨域请求,那么浏览器就会拦截数据,并在控制台中说明是因为同源策略请求失败的
3.2答案在2.2中
4.在跨域请求中:浏览器默认会分为简单请求和复杂请求,简单 请求会直接请求服务并返回数据,复杂请求则浏览器先发送 optin请求,然后服务器端响应如果允许则会发器后续请求,如果服务器不响应或者拒绝,则不会发器后续请求
其中简单请求要求如下:
请求方法是以下三种方法之一:
- HEAD
- GET
- POST
HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
复杂请求发起流程如下:
例如:post请求需要自定义请求头 ,增加请求头signature ,和user
那么此时浏览器会发起optin 请求,会携带如下请求头
access-control-request-headers: signature ,user
access-control-request-method: POST、
其中access-control-request-headers 是告诉服务器,客户端想自定义请求头
access-control-request-method: 是告诉服务器请求通过什么样方式发出
然后服务器响应:服务器需要响应的响应头中需要有如下信息
"Access-Control-Allow-Methods", '*' ; //跨域预检请求时候允许的请求方式,*则是任意请求方式,也可以指定请求头中的access-control-request-method的值
"Access-Control-Allow-Headers", "*" ;//允许跨域自定义的请求头,*则是任意请求头都可以,也可以指定请求头中的 access-control-request-headers的值
Access-Control-Allow-Credentials: true
"Access-Control-Max-Age", "3600" //跨域时候预检周期,防止重复性预检,即该请求在3600秒以内,不会进行预检了(周期内不进行optin 请求)