JSONP跨域问题

参考资料：https://segmentfault.com/a/1190000011145364

Access to XMLHttpRequest at 'https://www.layui.com/demo/table/user/?page=5&limit=10' from origin 'file://' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

测试：<meta name="referrer" content="no-referrer" />

JSONP跨域：跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要完全一致，否则浏览器就会阻止此跨域请求返回的数据。

原理；浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的，当向第三方站点请求时，我们可以将此请求放在<script>标签的src属性里，这就如同我们请求一个普通的JS脚本，可以自由的向不同的站点请求。

<script type=”text/javascript”>

function x(result) { //回调

console.log(result);

}



var sc = document.createElement(“script”);

sc.src = “http://localhost:8081/DreamWeb/ctrl/proposal/jsonp?callback=x”;

document.body.append(sc);



</script>

$.ajax({

            url : "http://localhost:8081/DreamWeb/ctrl/proposal/jsonp",

            data : {

                ana : 1,

                uuid : ''

            },

            dataType: 'jsonp',

            jsonp : 'callback',

            success :function (result) {

                console.log(result);

            },

            error : function(result) {

                console.log(result);

            }

        });

script标签设置src属性为请求的地址，并将回调函数作为参数

服务端构建JS脚本，返回给客户端的数据:

return request.getParameter("callback")+ "(" + "[{x:1},{x:2}]" + ")";

客户端在回调函数中解析服务器生成的数据