解决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);