百度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!

相关文章
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9191 90
|
测试技术 API
【API管理 APIM】如何查看APIM中的Request与Response详细信息,如Header,Body中的参数内容
【API管理 APIM】如何查看APIM中的Request与Response详细信息,如Header,Body中的参数内容
325 2
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
228 0
【Azure Function】Function本地调试时遇见跨域问题(blocked by CORS policy)
【API Management】使用 APIM Inbound Policy 来修改Content‐Type Header的值
【API Management】使用 APIM Inbound Policy 来修改Content‐Type Header的值
170 0
【API Management】使用 APIM Inbound Policy 来修改Content‐Type Header的值
|
前端开发 对象存储 数据安全/隐私保护
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
阿里云前端直传has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
2193 2
|
API 数据安全/隐私保护 网络架构
【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)
578 0
|
JSON 小程序 API
【Azure API 管理】APIM CORS策略设置后,跨域请求成功和失败的Header对比实验
【Azure API 管理】APIM CORS策略设置后,跨域请求成功和失败的Header对比实验
328 0
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
861 20
|
8月前
|
安全 API PHP
PHP中实现CORS跨域资源共享的方法
通过这种方式,你可以在PHP应用中灵活地实现CORS,以支持跨域Web应用的需求。
556 15
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
1077 3