ajax跨域问题详解

ajax跨域问题详解

跨域问题的条件及原因

1. 浏览器限制(当发现请求是跨域的时候会，浏览器出于安全的考虑，会有一些校验)
2. 跨域(协议域名端口任何一个不一样都是跨域)
3. XHR(XMLHttpRequest)请求(只有当请求是XHR请求时才会有跨域问题)
   简单来说就是ajax发送一个跨域的请求的时候才会发生跨域问题

如何解决跨域问题

在了解了跨域问题的原因之后我们可以多种解决方案

一、去除浏览器限制

通过修改浏览器的方式，将浏览器的校验disable掉。这种方式只是一种理论可行的方式，在真实的应用环境中是不可能做到让每一个客户端做到的，而且也会带来浏览器的安全和性能问题

二、使用jsonp请求

我们知道，只有当请求为xhr请求时，才会发生跨域问题。
步骤

1. 在发送ajax请求时，设置请求的类型为jsonp e.g. dataType:“jsonp”
2. 后台代码需要使用对应的jsonp方式来响应请求
3. 普通的ajax请求返回类型为json，而jsonp请求返回的是一段script片段，并且url会有callback=…的参数，这是因为
   jsonp请求在发送的时候默认会加入一个callback的参数，后台接受到带有callback的请求的时候会将返回的数据由json转为javascript,而javascrip中方法的参数就是要返回的json数据
   
   jsonp请求的弊端
   jsonp是一个非官方协议
   服务器需要改动代码支持
   只支持GET方式请求,很难满足实际开发的需求

三、解决请求本身跨域

CORS请求原理,CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

图中出现了简单请求和非简单请求
如何区分简单请求和非简单请求
请求方法是以下三种方法之一：HEAD,GET,POST
HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)
凡是不同时满足上面两个条件，就属于非简单请求

简单请求和非简单请求的区别
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

（1）Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
（2）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，
（3）Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（4）Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段
（5）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。

在java中一般使用filter在filter中set上述字段
springboot中提供的专门用于跨域的注解@CrossOrigin

通过代理实现跨域