浏览器禁止跨域请求json数据解决方法--jsonp

　　目前在做一个项目需要有天气预报模块，使用的是api获取数据然后进行解析并显示。但是在调试的时候发现浏览器一直显示不出东西，控制台一看，提示的是

问题应该是浏览器不支持跨域访问，通过搜索发现解决浏览器跨域访问问题的方法一般是针对chrome的，在快捷方式后面加--allow-file-access-from-files 允许跨域传输或者是

--disable-web-security 关闭安全访问，但是在调试的时候，刚开始成功了，过了几天后不知道为什么又是不行了，总之就是觉得很不稳定的方法，还有就是考虑到在其他的客户机上面使用时一般不会去弄这写东西，这只是开发时才会用的。所以只能另外找办法了。

　　通过查找资料发现解决的另外两种办法分别是：

　　　　1.使用.jsp 和 .php进行封装，在服务端对api进行请求，再返回数据；

　　　　2.通过jsonp技术获取数据；

　　由于个人原因，选择了第二种，也就是jsonp技术来实现。以下是实现过程：

　　请求的api是 http://api.map.baidu.com/telematics/v3/weather?location=广州&output=json&ak=FK9mkfdQsloEngodbFl4FeY3 返回的数据可以通过output设置为xml或者json。此处设置为json。默认返回json技术，所以我们可以在此处使用jsonp来解析。jsonp+jquery解决方案如下：

$(function() {
                    function getWeather() {
                        $.ajax({
                            type: "get",
                            async: false,
                            url: "http://api.map.baidu.com/telematics/v3/weather?location=广州&output=json&ak=FK9mkfdQsloEngodbFl4FeY3",
                            dataType: "jsonp",
                            jsonp: "callback",
                            jsonpCallback: "weather",

                            success: function (json) {    //成功回调函数                                                  
                                 alert(json.result[0].weather_data[0].data);   //输出结果
                            },

                            error: function () {  //失败回调函数
                                console.log('fail to get weather data!');
                            }
                        });
                    }    

这样便可以解决跨域请求的问题。jsonp的原理相当于将需要的资源通过script标签引入，所以不受跨域问题的限制。

 

转载于:https://www.cnblogs.com/uyisi/p/5639198.html