前端跨域如何请求？

589 次访问 2021-07-28

渣渣辉

跨域即跨站HTTP请求(Cross-site HTTP request)，指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。

jsonp原理
JSONP（JSON with Padding）是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。jsonp 的原理很简单，利用了【前端请求静态资源的时候不存在跨域问题】这个思路，但是这个只支持get请求。既然这个方法叫 jsonp，后端数据一定要使用json 数据。

前端jquery的写法：


$.ajax({
type: "get",
url: baseUrl + "/jsonp/get",
dataType: "jsonp",
success: function(response) {
console.log(JSON.parse(response))
}
});

	注意这里的ajax请求中，dataType为jsonp类型，其他的和普通的请求没有区别。

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

前端jquery的写法：

$.ajax({
    type: "POST",
    url: baseUrl + "/jsonp/post",
    dataType: 'json',
    crossDomain: true,
    xhrFields: {},
    data: {},
    success: function (response) {
        console.log(response)// 返回的 json 数据
    }
});

crossDomain: true，这里代表使用跨域请求
xhrFields: ，这样配置就可以把 cookie 带过去了，不然我们连 session 都没法维护，很多人都栽在这里。当然，如果你没有这个需求，也就不需要配置这个了。