CORS解决跨域 · 学习AJAX

[TOC] >[success] # CORS解决跨域 <br/> ~~~ 这个方式有一个缺点，就是只支持主流支持'html5'的浏览器，低版本浏览器还是需要用'JSONP'来解决跨域问题。只需要在后端设置'header'为'Access-Control-Allow-Origin:*'即可'解决跨域'问题，例子如下： ~~~ <br/> >[success] ## 前端代码 <br/> 1. index.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CORS方式解决跨域</title>  <script src="./ajax.js"></script> </head> <body> <input type="button" value="跨域访问"> <script> document.querySelector('input').onclick = function(){ // 点击按钮 ajax({ type: 'get', // 这里跨域时候无所谓 url: 'http://10.1.2.160/backData.php', // 这里根据ip地址访问自己电脑的接口，会产生跨域 success: function(data){ console.log(data) } }) } </script> </body> </html> ~~~ <br/> 2. ajax.js ~~~ /** * ajax工具函数 * @param {*} option 参数为对象，值为以下内容 * @param {*} url 接口url * @param {*} type 请求类型 * @param {*} data 接口参数(key1=value1&key2=value2) * @param {*} success 回调函数 */ function ajax (option) { var xhr = new XMLHttpRequest(); // 如果是get,并且有参数才设置 if (option.type === 'get' && option.data) { option.url += "?"; option.url += option.data; option.data = null; // 这样最后直接send data即可 } xhr.open(option.type, option.url); // 如果是post,并且有参数才设置 if (option.type == 'post' && option.data) { xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var type = xhr.getResponseHeader("Content-Type"); // 获取服务器在header上的信息 if (type.indexOf('json') != -1) { // 判断为json格式信息 option.success(JSON.parse(xhr.responseText)) } else if (type.indexOf('xml') != -1) { // 判断为xml格式信息 option.success(xhr.responseXML) } else { // 普通字符串 option.success(xhr.responseText) } } } xhr.send(option.data); } ~~~ <br/> >[success] ## 后端代码 <br/> 1. backData.php ~~~ <?php // 设置允许跨域（目前只有html5支持这个方法，如果想向下兼容就的用jsonp） header('Access-Control-Allow-Origin:*'); // 给前端返回数据 echo '你来了啊'; ?> ~~~