# 同源政策—Ajax请求限制 Ajax请求限制 Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站, A网站中的HTML文件只能向A网站服务器中发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求，但是A网站是不能向B网站发送Ajax请求的，同理, B网站也不能向A网站发送Ajax请求。 ## 什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源。  ## 同源政策的目的 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie, B网站是不能访问的。 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求,浏览器就会报错。 ## 使用JSONP解决同源限制问题 jsonp是json with padding的缩写,它不属于Ajax请求,但它可以模拟Ajax请求。 1. 将不同源的服务器端请求地址写在script标签的src属性中 ~~~ <script src="www. example . com"></script> <script src= "https: //adn .bootcss. com/jquery/3.3.1/jquery. min.js"></ script> ~~~ 2.服务器端响应数据必须是一个函数的调用， 真正要发送给客户端的数据需要作为函数调用的参数。 ~~~ const data = . fn({name: "张三”， age: "20"}) ' ; res. send(data) ; ~~~ 3.在客户端全局作用域下定义函数fn ~~~ function fn (data) { } ~~~ 4.在fn函数内部对服务器端返回的数据进行处理 ~~~ function fn (data) { console. log(data) ; } ~~~ ## JSONP代码优化 1. 客户端需要将函数名称传递到服务器端。 2.将script请求的发送变成动态请求。 ~~~ //获取按钮 var btn = document . getElementById( 'btn' ); //为按钮添加点击事件 btn.onclick = function () { //创建script标签 var script = document . createElement( 'script' ); //设置src属性 script.src = ' http: //localhost: 3001/better?callback=fn2' ; //将script标签追加到页面中 document . body . appendChild( script); //为script标 签添加onload事件 script.onload F function () { //将body中的script标签删除掉 document . body . removeChild(script); } } ~~~ JSONP代码优化 1.客户端需要将函数名称传递到服务器端。 2.将script请求的发送变成动态请求。 3.封装jsonp函数，方便请求发送。  3.封装jsonp函数，方便请求发送。