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 '你來了啊'; ?> ~~~