js jsonp 跨域跨域传值

来源：蜘蛛抓取(WebSpider) 时间：2019-07-21 11:08 标签： jsonp 跨域

最近因为工作需要需要把爱词霸的每日一句引入到页面上，爱词霸向外开放了 接口返回 json 数据为了让页面更轻巧，我没有用 jQuery而是直接纯 js 写了一段代码：

运行之后数据並没有获取到，而是出现了如下错误提示： 

 
 

 跨域请求的解决办法就是 . HTML 中 script 标签可以加载其他域下的 js, jsonp 跨域 就是通过 script 标签加载数据的方式去获取數据当做 JS
 代码来执行然后再用一个回调函数抽取数据：
 
 
 
 

 再查查资料，发现有人做了封装：
 
 

    

  



                            

                                                    

                                

  

    jsonp 跨域实现跨域请求的原理简单的說就是动态创建”script”标签，然后利用”script”的src 不受同源策略约束来跨域获取数据
  

  

    jsonp 跨域 由两部分组成：回调函数和数据。回调函数是当响應到来时应该在页面中调用的函数回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据
  

  
    
    
  • 动态创建”script”标签，设置其src回调函数在src中设置：
    
    • 
  

  
    
    
  • 在页面中，返回的JSON作为参数传入回调函数中我们通过回调函数来来操作数据:
    
    • 
  
// 用于vue安装这个插件 这个方法的第┅个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: // 把当前的对象挂载到vue的全局
  

    

  



                            

                                                    

                                

  

    本文主要给大家介绍了关于使用jsonp 跨域解决js读取本地json跨域的相关内容分享出来供大家参考学习，下面话不多说了来一起看看详细的介绍吧
  

  

    通过ajax方式读取本地json文件，谷歌瀏览器会提示跨域错误导致获取不到json数据。
  

  

    
      

        
      

    
  

  

    
      

        
      

    
  

  

    这段代码本身没有错误只是谷歌浏览器因为安全问题，拦截这类的访问但是在火狐浏览器中可以访问，可以去尝试一下
  

  

    使用jsonp 跨域解决跨域 ：（仅适用于GET请求）
  

  

    <script> 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件而並不要求同源。
  

  

    所以 jsonp 跨域 的理念就是我和服务端约定好一个函数名，当我请求文件的时候服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数并且将数据当做参数传入。非常巧合的一点（其实并不是）JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里媔可以直接使用这个对象
  

  

    
      

        
          

            回调函数可以简写为 cb , 然后 回调函数 名称要与JSON文件中的名称一致
          

        		
      

    
  

  
    
    
  • 
      
    
        一定要在json文件的外部用函数名+（）套住；
      
    
    
    • 
    
  • 
      
    
        js中的回調函数一定要与json中函数名相同；
      
    
    
    • 
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 jsonp 跨域 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐