解决跨域问题,实例调用百度地图

简介: 1.什么是跨域?浏览器对于javascript的同源策略的限制,例如a.com下面的js不能调用b.com中的js,对象或数据(因为a.com和b.com是不同域),所以跨域就出现了。
1.什么是跨域?

浏览器对于javascript的同源策略的限制,例如a.com下面的js不能调用b.com中的js,对象或数据(因为a.com和b.com是不同域),所以跨域就出现了。同域的概念又是什么呢?所谓的同源是指,域名、协议、端口均为相同。

2.如何解决跨域?

JSONP:
JSONP 是一种非官方的跨域数据交互协议。JSONP 本质上是利用 <script><img><iframe>等标签不受同源策略限制,可以从不同域加载并执行资源的特性,来实现数据跨域传输。
JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。<br/>这种方式非常好用,但是有一个缺陷,只能实现get请求。

设置代理:
可以在服务器搭建nginx代理转发,或者由后台去调用之后把结果返回给前端,后台做一下中转。还可以搭建node服务器,用node进行代理转发。

请求的后台设置允许跨域:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

iframe:
所以跨域通信其实很简单,在iframe和主页里都不断地检测hashtag有没有变化,一旦有变化,就做出相应的改变。


setInterval(function() {
    var hashVal = window.location.hash.substr(1);
    document.body.style.backgroundColor = hashVal;
}, 1000); 

这么做的问题就是,需要不断地去检测hashtag是否改变,效率有点低,如果能通过原生的监听来实现,就会更加高效和优雅。这里就涉及到另一个iframe特性:可以设置其他iframe的大小,即使是不同域的。而页面的resize事件是可以监听的,所以就有了下面这个模型。<br/>
主页面先把消息附加到hashtag,然后改变一个隐藏的(或者页面外的)iframe的size。这个iframe会监听resize事件,同时捕获到hashtag。捕获到hashtag后(也就是所需的数据),再对hashtag做进一步的处理。处理完后把数据传到主页内的一个iframe,或者直接操作该iframe。这样就比较优雅地完成了跨域操作。

3.实例

最近在做一个涉及到地图的项目,使用的是百度地图API,就出现了跨域的问题。
http://api.map.baidu.com/geoc... 这个api的作用是获取周边地理信息,在调用的时候产生了跨域问题

后面采用了JSONP的方式解决


$.ajax({
    url: 'http://api.map.baidu.com/geocoder/v2/?address=成都&amp;output=json&amp;ak=sn4yosvUfbGYsdffew3wq23114',
    type: 'GET',
    async:false,//设置同步。ajax默认异步
    dataType: 'jsonp',
    jsonp:'callback',//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback:"callback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
    timeout: 5000,
    contentType: 'application/json; charset=utf-8',
    success: function (result){
        console.log(result);
    }
})

很多时候我们都会碰到跨域问题,但也有很多方法来解决跨域问题,在解决跨域时,我们也要注意一下安全性问题

来源:https://segmentfault.com/a/1190000017098253

相关文章
|
负载均衡 应用服务中间件 网络安全
百度搜索:蓝易云【介绍Nginx、正向代理和实现反向代理的两个实例】
总结来说,Nginx是一个功能强大的Web服务器和反向代理服务器,可以通过正向代理实现内部员工访问外部互联网资源,通过反向代理实现负载均衡和SSL终端代理等功能。这些应用场景都能够提高性能、可靠性和安全性,使Nginx成为构建高效Web应用的重要工具之一。
100 2
|
6月前
|
数据采集 存储 JavaScript
Buzz库网络爬虫实例:快速爬取百度搜索实时热点
Buzz库网络爬虫实例:快速爬取百度搜索实时热点
|
应用服务中间件 nginx
百度搜索:蓝易云 ,Nginx设置禁用 OPTIONS 请求以及允许跨域教程!
通过按照上述步骤,在Nginx中设置禁用OPTIONS请求和允许跨域。请确保在编辑Nginx配置文件时使用正确的服务器名称或IP地址。
102 0
|
6月前
|
Go C语言
百度搜索:蓝易云【Go与C语言的互操作,import “C“的实例】
通过import "C",我们可以在Go代码中无缝使用C语言的函数和库,这为我们在Go项目中利用C语言的特定功能提供了便利。请注意,在使用import "C"时,Go代码和C代码之间的交互有一些规则和限制,需要遵循Go的规范和C语言的语法。
55 0
|
前端开发 Java Spring
百度搜索:蓝易云【SpringBoot解决跨域的方法详细教程。】
通过以上步骤,你可以在Spring Boot中配置跨域支持。根据实际需求,可以灵活调整跨域规则来满足项目的具体需求。
53 0
|
机器学习/深度学习 人工智能 并行计算
Python 深度学习AI - 利用训练好的模型库进行图像分割、一键抠图实例演示,百度深度学习平台飞浆paddlepaddle-gpu的安装与使用
Python 深度学习AI - 利用训练好的模型库进行图像分割、一键抠图实例演示,百度深度学习平台飞浆paddlepaddle-gpu的安装与使用
646 0
Python 深度学习AI - 利用训练好的模型库进行图像分割、一键抠图实例演示,百度深度学习平台飞浆paddlepaddle-gpu的安装与使用
|
JavaScript API
百度Web服务API跨域的Cross-Origin Read Blocking (CORB) blocked cross-origin response报错两种解决方案
百度Web服务API跨域的Cross-Origin Read Blocking (CORB) blocked cross-origin response报错两种解决方案
436 0
|
JSON 前端开发 JavaScript
php函数file_get_contents应对百度天气接口CORB跨域解决方案
php函数file_get_contents应对百度天气接口CORB跨域解决方案
91 0
|
Web App开发 安全 网络协议
Fiddler 技术篇-捕捉https协议设置,抓取百度https实例演示
Fiddler 技术篇-捕捉https协议设置,抓取百度https实例演示
296 0
Fiddler 技术篇-捕捉https协议设置,抓取百度https实例演示
|
API 语音技术
API接口调用里的QPS指什么?百度语音API里的QPS实例说明
API接口调用里的QPS指什么?百度语音API里的QPS实例说明
547 0
API接口调用里的QPS指什么?百度语音API里的QPS实例说明

热门文章

最新文章