跨域请求

Posted 2021-02-13 xiaolanschool

跨域：当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。不同的域之间相互请求资源，就叫“跨域”。浏览器的安全策略是需要同源，目的是保护用户的安全信息。如cookie、localStorage和IndexDB无法读取，无法操作跨域的iframe里的dom元素，ajax请求不能发送。

一、浏览器允许所有的请求

 只需要在服务器端头部加上：header( "Access-Control-Allow-Origin: *" ); 一般为了安全起见，前端需设置token返回给后端，此方式在项目中并不适用

二、利用jsonp跨域

jsonp方式只适用GET请求，jsonp利用<script src=“”>标签跨域的特性，允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住json数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

 //回调函数
function handleCallback (result) {
    var data = JSON.stringify(result); //json对象转成字符串
     $("#val").val(data);
}
 
//向头部输入一个脚本，该脚本发起一个跨域请求
$("head").append("<script src=‘http://localhost:8000/index?callback=handleCallback‘></script>");

三、利用cors实现跨域（Cross-Origin Resource Sharing---跨域资源共享）

CORS支持所有类型的HTTP请求,发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制,整个CORS通信过程，都是浏览器自动完成，自动添加头部信息，不需要用户参与。

1、简单的请求： head,get,post请求和Content-Type为application/x-www-form-urlencoded、multipart/form-data、text/plain

2、非简单的请求：put,delete和content-type为application/json

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

3、cors方法也可以适用jsonp

function handleCallback(data) {
    $("#val").val(data);
}
$.ajax({
    url: "http://localhost:8000/index",
    type: "GET",
    dataType: "jsonp", //指定服务器返回的数据类型
    //jsonp: "theFunction", //指定参数名称
    jsonpCallback: "handleCallback", //指定回调函数名称
    success: function (data) {
         alert(‘success‘);
    }
});