原生ajax 跨域 cors跨域解决跨域同源策略的问题 cors跨域传递cookie的方式

let ajax =new XMLHttpRequest();

ajax.open("GET",'http://XXXXXXXX',true); 

//true表示异步，false表示同步但是现在同步的方式基本被废除了，同步会在浏览器出现警告，提示用户体验不好

ajax.send();

ajax.onreadystatechange= function(){
//readyState 有四个值 0-4 1.初始化；2.刚刚链接 3.收到响应头，4.收到相应体
    if(ajax.readyState==4){
        // status 就是状态啊，2XX都是成功，3XX代表重定向，304是重定向到缓存
        if(ajax.status>=200&&ajax.status<300||ajax.status==304){
            alert("成功")
            console.log(ajax.responseText)
            
        }else{
            alert("失败")
        }
    }
}

如果遇到同源策略的问题会提示

为啥不能跨域？
SOP 同源策略就是（域名，端口，协议）都需要相同所有支持JavaScript的浏览器都支持。

ajax是直接连接服务器么？

不是的，ajax是通过浏览器连接服务器的（ajax把请求提交给浏览器，然后浏览器向服务器请求）

那跨域是被谁阻止的？

不是被服务器而是被浏览器阻止的。

这是阻止了请求还是阻止了响应呢？

浏览器会检查响应回来的数据和当初发出去的请求是不是符合同源策略，这是为了安全考虑

所以说ajax之所以不能跨域跟服务器没有关系，跨域限制是浏览器的做的。在标准情况下ajax是不能跨域的，这个情况跟前端的代码是没关系的。

怎么才能让ajax跨域呢？

需要服务器在响应的时候做一个声明（虽然我们不支持同源策略，但是他的请求我能接受，浏览器你放他过去吧）

这里有个头需要在发送响应的时候声明给响应头设置一个 “Access-Control-Allow-Origin”:“*”

*代表所有的域名都可以请求数据

这样就可以成功了。

CORS(现代浏览器普遍跨域解决方案)

但是整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信如果不需要cookie的参与将会和同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因为，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

没有跨域的情况如何传递cookie

后端server只要在回应头部‘set-cookie’，那么就会有cookie产生并保存在客户端client。

等到client再次向后端server发送请求时浏览器的机制就会自动携带cookie随着请求一并发送给后端。

cors跨域之后如何传递cookie

浏览器默认情况下无法主动跨域向后端发送cookie，如果你要发送cookie给server的话, 就需要将withCredentials设置为true了.

但是,server并不是随便就能接受并返回新的cookie给你的。在server端,还需要设置. Access-Control-Allow-Credentials: true

这样server才能返回新的cookie给你. 但是，这还有一个问题,就是cookie还是遵循same-origin policy（同源策略）的。所以, 你依旧无法使使用它.

最多是访问到它。即使你设置了cors！所以很多时候你能访问到cookie，即使在客户端做了修改它也不会改变，他的CRUD(增删改查)只能由 server控制.

//后端设置

httpResponse.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("Origin"));
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");


//前端设置

$.ajax({
    url: "http://localhost/abc",
    type: "GET",
    xhrFields: {
         withCredentials: true
    },
    crossDomain: true,
    success: function (data) {
         render(data);
    }
})

最后建议

最好不要设置cors，一方面不安全（出于开发时的便捷，你可以使用一些中间件的代理例如proxyTable，帮你实现请求转发达到跨域请求的效果）。另一方面cookie很多时候都是硬需求，还是老老实实的设置可访问的域，这样才能灵活使用cookie。

原生ajax 跨域 cors跨域 解决跨域 同源策略的问题 cors跨域传递cookie的方式

猜你喜欢

原生ajax 跨域 cors跨域解决跨域同源策略的问题 cors跨域传递cookie的方式