百度API调用JSONP解决跨越问题 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header

简介: 百度API调用JSONP解决跨越问题 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header

百度API调用时会出现跨域,导致been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

使用JSONP的解决方案如下:

封装IP函数

    function getIp(ip) {
        var url = 'http://api.map.baidu.com/location/ip?ak=11Z8uiP8kIz6AG0Vjiwzbc5f9Ii0cdHd&ip=' + ip + '&coor=bd09ll&callback=callBack';
        return url;
    }

生成script

    //生成script
    function createScript(src) {
        var el = document.createElement('script');
        console.log(el);
        el.src = src;
        document.body.appendChild(el);
    }


回调函数

    //回调函数
    function callBack(rs) {
        var city = rs['content']['address'];
        console.log(city);
    }


执行渲染

createScript(getIp("39.185.200.145"));

Done!

目录
打赏
0
0
0
0
184
分享
相关文章
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
432 90
|
8月前
|
API
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
|
8月前
|
API
【API Management】使用 APIM Inbound Policy 来修改Content‐Type Header的值
【API Management】使用 APIM Inbound Policy 来修改Content‐Type Header的值
【API Management】使用 APIM Inbound Policy 来修改Content‐Type Header的值
|
8月前
|
API
【Azure API 管理】APIM中的Policy是否有调用速率的方法(熔断机制)
【Azure API 管理】APIM中的Policy是否有调用速率的方法(熔断机制)
【Azure API 管理】API Management如何有效且快速更新呢?如对APIs/Policy等设置内容
【Azure API 管理】API Management如何有效且快速更新呢?如对APIs/Policy等设置内容
|
8月前
|
【Azure API 管理】为调用APIM的请求启用Trace -- 调试APIM Policy的利器
【Azure API 管理】为调用APIM的请求启用Trace -- 调试APIM Policy的利器
|
8月前
|
API
【Azure API 管理】Azure API Management在设置 Policy时,如何对URL进行解码呢? 使用 HttpUtility.UrlDecode 出错
【Azure API 管理】Azure API Management在设置 Policy时,如何对URL进行解码呢? 使用 HttpUtility.UrlDecode 出错
【Azure API 管理】解决调用REST API操作APIM(API Management)需要认证问题(Authentication failed, The 'Authorization' header is missing)
【Azure API 管理】解决调用REST API操作APIM(API Management)需要认证问题(Authentication failed, The 'Authorization' header is missing)
144 0
【Azure API 管理】APIM CORS策略设置后,跨域请求成功和失败的Header对比实验
【Azure API 管理】APIM CORS策略设置后,跨域请求成功和失败的Header对比实验
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等