脚本宝典收集整理的这篇文章主要介绍了解决js调用接口跨域名报错问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

    

脚本宝典总结

以上是脚本宝典为你收集整理的解决js调用接口跨域名报错问题全部内容，希望文章能够帮你解决解决js调用接口跨域名报错问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。