cors解决跨域问题笔记-1

在公司项目中解决了各种类型的跨域, 由于项目页面嵌套了相同域名但是端口号不同的iframe页面, 所以存在了iframe之间的跨域问题, 这种直接在页面上通过

document.domain = 'test.com'

来设置相同的超级域名来解决问题 (注意: 1.iframe页面和嵌套iframe的父页面都需要设置这段代码 2. 两个域之间只能是端口号不同的情况下才能生效) 

---

 

今天记录的主要是通过ajax请求所出现的跨域问题, 解决方案有很多种, 最主流的是通过CORS的解决方案来解决.

以前端jquery库 + 后端java代码为例:

前端发起ajax请求:

$.ajax({
        type: 'GET',
        url: url,
        xhrFields: {
            withCredentials: true   // Request header中便会带上 Cookie 信息
        },
        crossDomain: true
    })

后端java设置自定义响应头

//设置可以跨域
String orgin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Headers","DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,key,x-biz,x-info,platinfo,encr,enginever,gzipped,poiid");
response.setHeader("Access-Control-Allow-Origin", orgin);
response.setHeader("Access-Control-Allow-Methods","*");
response.setHeader("Access-Control-Allow-Credentials", "true");

注意: 若要在请求中附送cookie的信息 前端代码中 withCredentials: true 和后端 response.setHeader("Access-Control-Allow-Credentials", "true") 这两段代码不能少   (XMLHttpRequest.withCredentials)

如果不设置 前端发送的ajax请求(跨域的情况下)中将不会携带cookie的字段, 后端也就不能通过cookie来获取相应的信息

(若后端不需要获取cookie等客户端状态证件类的信息, 就不需要设置 Credentials)

当设置了

response.setHeader("Access-Control-Allow-Credentials", "true");

"Access-Control-Allow-Origin" 字段就不能设置为 "*", 需要动态地去获取客户端的orgin

String orgin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", orgin);

 

这样 通过ajax发送带有cookie的请求的跨域问题就解决了