解決js調用接口跨域名報錯問題
前言：自己是一個新手，最近想寫一個自己的網站來讓自己玩一玩，因為是頭一次寫，所以有很多過程都不是很了解，很多功能的實現也不是很熟悉，都需要在網上查閱資料來進行完成。
這篇文章是自己在寫調用一個接口時所遇到的問題。
問題描述
自己在調用一個接口的時候，使用的是js,用ajax去向接口鏈接提交請求來進行調用的，但是在代碼寫好以后調用的時候，頁面一直沒有反應，后來查看控制台發現報錯了，如下圖所示，經過查閱資料發現這是跨域訪問的原因。
解決方法
在網上查了好多方法，想通過js實現，一直沒有實現出來，后來又使用php去進行實現，功能能使用出來以后還是有一些小遺憾，於是想着在進一步的優化……
最后的思路是通過創建一個新php文件來獲取接口內容作為后台，在使用ajax將數據傳輸到前端頁面，
獲取接口api
首先是要有需要使用的api接口，這個可以直接在博客園或者百度上面搜索到的。
后台使用php等語言調用接口
后台使用php去調用接口，將數據獲取到自己的服務器上，然后在使用ajax從自己的中轉接口上獲取數據，這樣就解決了跨域的問題，就是需要去多創建一個文件。
代碼記錄
自己寫的是中英文翻譯的功能。
html代碼
<form>
<textarea id="inputOriginal" placeholder="請輸入你要翻譯的文字或網址" name="inputOriginal"></textarea>
<div id="transTarget">
<p><span></span></p>
</div>
<input type="button" value="翻譯" id="fy">
</form>
javascript代碼
$("#fy").on('click',function() {
var input_Original = $('#inputOriginal').val();
// alert(input_Original);
$.getJSON('https://api.xingzhige.com/API/ydfy/api.php?msg=' + input_Original, function (res) {
// alert(res.data);
$("#transTarget p span").text(res.data);
})
})
})
php代碼
<?php
header('Content-Type:application/json; charset=utf-8');
$inputOriginal = $_GET['inputOriginal'];
$url = "https://api.xingzhige.com/API/ydfy/api.php?msg=$inputOriginal";
function curl_get_https($url){
$curl = curl_init(); // 啟動一個CURL會話
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); // 跳過證書檢查
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true); // 從證書中檢查SSL加密算法是否存在
$tmpInfo = curl_exec($curl); //返回api的json對象
//關閉URL請求
curl_close($curl);
return $tmpInfo; //返回執行結果
}
$res = curl_get_https($url);
$obj = json_decode($res,true);
// $a = $obj->$data;
function curl_post_https($url,$data){ // 模擬提交數據函數
$curl = curl_init(); // 啟動一個CURL會話
curl_setopt($curl, CURLOPT_URL, $url); // 要訪問的地址
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0); // 對認證證書來源的檢查
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1); // 從證書中檢查SSL加密算法是否存在
curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); // 模擬用戶使用的瀏覽器
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); // 使用自動跳轉
curl_setopt($curl, CURLOPT_AUTOREFERER, 1); // 自動設置Referer
curl_setopt($curl, CURLOPT_POST, 1); // 發送一個常規的Post請求
curl_setopt($curl, CURLOPT_POSTFIELDS, $data); // Post提交的數據包
curl_setopt($curl, CURLOPT_TIMEOUT, 30); // 設置超時限制防止死循環
curl_setopt($curl, CURLOPT_HEADER, 0); // 顯示返回的Header區域內容
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // 獲取的信息以文件流的形式返回
$tmpInfo = curl_exec($curl); // 執行操作
if (curl_errno($curl)) {
echo 'Errno'.curl_error($curl);//捕抓異常
}
curl_close($curl); // 關閉CURL會話
return $tmpInfo; // 返回數據，json格式
}
exit($res);