精华内容
下载资源
问答
  • vue跨域请求

    2019-03-27 14:49:39
    vue的3种跨域请求方式
  • 主要介绍了详解WebSocket跨域问题解决的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了解决ajax能访问本地文件问题(利用js跨域原理),具有一定的参考价值,兴趣的可以了解一下。
  • springmvc跨域处理,和过滤器方式跨域处理的主要代码,整体系统基于springboot框架搭建
  • vue中axios跨域请求

    万次阅读 2019-06-22 13:22:31
    vue中axios跨域请求 1.axios 是 第三方库 使用方法: 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></...

    vue中axios跨域请求

    1.axios 是 第三方库
    使用方法:

    • 使用 npm:
        $ npm install axios
    
    • 使用 bower:
    $ bower install axios
    
    • 使用 cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    axios get 请求示例

    HTML代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="getData">get-mock-data</button>
            <button @click="get_api_data"> get-api-data </button>
        </div>
        
    </body>
    </html>
    

    js代码

    <script>
              console.log( axios )
            // 当我们引入axios cdn后会全局暴露出一个axios对象
            new Vue ({
                el:"#app",
                methods:{
                    
                      getData(){
                        // var p = axios({
                        //     url:'./data/name.json'
                        // });
                        // console.log(p);//axios是一个promise对象
    
                        axios({
                            url:"./data/name.json",
                            method:'get',//method默认是get请求
                        }).then(function(res){
                            console.log(res)
                            // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
                        }).catch(err=>{
                            console.log(err)
                        })
    
                    },
    

    请求结果 : axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
    在这里插入图片描述

     //get在线跨域请求
                   get_api_data(){
                      axios({
                          url:'https://请求地址',//在线跨域请求
                          method:"GET",//默认是get请求
                          headers:{//设置请求头
                              'X-Client-Info':' {"a":"3000","ch":"1002","v":"5.0.4","e":"15611234619393093477584"}',
                              'X-Host': 'mall.film-ticket.film.list',
                          },
                          params:{//?search后面的值写在params中
                              cityId: 330100,
                              pageNum: 1,
                              pageSize: 10,
                              type: 1,
                              k: 3969168,
                          }
                      }).then(function(val){
                          console.log(val) // axios会对我们请求来的结果进行再一次的封装( 让安全性提高 )
                      }).catch(function(err){
                          console.log(err)
                      })
                  },
              }
          })
      </script>
    

    get跨域请求中params:中的值对应hearders中Query String Parameters
    在这里插入图片描述
    在这里插入图片描述
    get方法总结:

    A: 无参数
            axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
     B: 有参数
            axios({
                url: 'http://xxx',
                method: 'get' //默认就是get,这个可以省略,
                params: {
                    key: value
                }
            })
    

    axios post 请求示例

    html代码
     <button  @click="postData"> post-data </button>
     
     js代码
           postData(){
                        let params = new URLSearchParams()//得到params对象,用来接收请求参数
                        // params.append( key, value )  key是参数名,value是参数值
                        //传递参数值
                         params.append( 'a', 2 )
                         params.append( 'b', 2 )
    
                        axios({
                            url:'http//localhost/php',
                            method:'post',
                            headers:{//请求头设置为表单提交的请求头
                                'Content-Type':"application/x-www-form-urlencoded"
                            },
                            data:params,
                        }).then( function (val) {
                            console.log(res)
                        }).catch( function (error) { 
                            console.log(error)
                        })
                    }
                }
                官方文档中axios post请求案例有点问题,请求会出现跨域问题;
    			以上示例为解决官方文档存在问题的写法;
    

    post方法总结

    //对于post请求可以统一设置一个请求头,后面所有post请求就可以不用单独设置请求头了
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    
     // 具体语法
     let params = new URLSearchParams()//得到params对象,用来接收请求参数
    
    // params.append(key,value) //请求参数写成键值对key就是参数名,value就是参数值
    
    params.append('a',1)
    params.append('b',2)
    
    axios({
        url: 'http://localhost/post.php',
        method: 'post',
        data: params,//将请求参数写入data;
          headers: {  //单个请求设置请求头
           'Content-Type': "application/x-www-form-urlencoded"
        }
    })
    .then(res => {
        console.log( res )
    })
    .catch( error => {
        if( error ){
        throw error
    }
    })
    
    展开全文
  • 今天小编就为大家分享一篇ThinkPHP 5.1 跨域配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了spring cloud gateway请求跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了Spring Boot 通过CORS实现跨域,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 跨域下载文件

    2017-09-01 15:33:47
    一般我们从服务器下载使用FileStream,但是如果跨域的话怎么办啦,使用HttpWebRequest,会遇到很多问题,我自己项目中使用并测试通过。
  • cesium跨域加载问题

    2019-02-20 17:29:16
    解决Cesium访问数据跨域问题,数据使用tomcat部署在服务器上。
  • 解决taro h5在调用接口时出现跨域的情况 修改config下的index.js
  • 本篇文章主要介绍了Vue 开发模式下跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了springboot配置允许跨域访问代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • php完美解决跨域问题

    2018-09-05 17:26:35
    开发的时候往往会遇到不同服务器之间的网页沟通,尤其是app本地h5和php后台之间的接口对接等问题。php完美解决跨域问题,你值得拥有。
  • 为什么会有跨域的问题出现,如何解决跨域问题 什么是跨域 ​ 定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了...

    为什么会有跨域的问题出现,如何解决跨域问题

    什么是跨域

    ​ 定义: 跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

    ​ 指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对
    javascript 施加的安全限制,防止他人恶意攻击网站.

    ​ 比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户
    名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输
    入的内容,这样用户名和密码就轻松到手了。

    什么是同源策略

    ​ 同源策略 是客户端脚本(尤其是 Javascript)的重要的安全度量标准。它最早出自 Netscape
    Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是:协议,
    域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和
    文档的属性

    解决方式

    1、jsonp

    1.1)去创建一个 script 标签

    1.2)script 的 src 属性设置接口地址

    1.3)接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

    1.4)通过定义函数名去接收后台返回数据

    //去创建一个 script 标签 
    var script = document.createElement("script"); 
    //script 的 src 属性设置接口地址 并带一个 callback 回调函数名称
    script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback"; 
    //插入到页面 
    document.head.appendChild(script); 
    //通过定义函数名去接收后台返回数据 
    function jsonpCallback(data){ 
    //注意 jsonp 返回的数据是 json 对象可以直接使用 //Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。 
    }
    

    2、 CORS:跨域资源共享

    ​ 原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求
    ​ 限制:浏览器需要支持 HTML5,可以支持 POST,PUT 等方法兼容 ie9 以上,需要后台设置

    2.1)跨域请求后的响应头中需要设置

    2.2)Access-Control-Allow-Origin 为发起请求的主机地址

    2.3)Access-Control-Allow-Credentials,当它被设置为 true 时,允许跨域带 cookie,但此时 Access-Control- Allow-Origin 不能为通配符*

    2.4)Access-Control-Allow-Headers,设置跨域请求允许的请求头

    2.5)Access-Control-Allow-Methods,设置跨域请求允许的请求方式

    Access-Control-Allow-Origin: * //允许所有域名访问,或者
    Access-Control-Allow-Origin: HTTP://a.com //只允许所有域名访问
    

    3、反向代理

    3.1)使用 vue-cli 脚手架搭建项目时 proxyTable 解决跨域问题

    //打开 config/index.js,在 proxyTable 中添写如下代码:
    //会拦截到/api的请求代理到目标服务器 http://f.apiplus.cn/xxx
    proxyTable: {  
        '/api':{ 
            target: 'http://f.apiplus.cn', //目标服务器地址
            changeOrigin: true, //改变源,是否跨域
            pathRewrite: { 
            	'^/api': '/xxx' //路径重写,重定向
            }
        }
    }
    

    4.window+iframe

    ​ 需要目标服务器响应window.name

    5.nginx反向代理解决跨域问题

    ​ 找到nginx的配置文件“nginx.conf”,修改一下信息.

    server {
            listen       80; #监听80端口,可以改成其他端口
            server_name  localhost; # 当前服务的域名
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                proxy_pass http://localhost:81;
                proxy_redirect default;
            }
    
    		location /apis { #添加访问目录为/apis的代理配置
    			rewrite  ^/apis/(.*)$ /$1 break;
    			proxy_pass   http://localhost:82;
           }
    #以下配置省略
    
    配置解释:
    
    1.由配置信息可知,我们让nginx监听localhost的80端口,网站A与网站B的访问都是经过localhost的80端口进行访问。
    
    2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。
    
    3.rewrite  ^/apis/(.*)$ /$1 break; 
    
    代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。
    
      rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。
    
      break代表匹配一个之后停止匹配。
    

    在这里插入图片描述

    展开全文
  • 前后端分离H5 跨域解决方案 提供多种解决方法 详情请下载文件 自己看 100%可以解决你的问题
  • 检查接口是否支持跨域请求,一个简单的ajax请求测试方法
  • 主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用nginx进行服务器管理,经常会遇到跨域问题,此文档就是解决此类问题; nginx跨域问题,解决多端口,多ip问题
  • 跨域+springmvc http://blog.csdn.net/wabiaozia/article/details/52778335 ...跨域:ajax跨域,这应该是最全的解决方案了http://web.jobbole.com/93344/ 阮一峰 跨域资源共享 CORS 详解:http://...

    原文链接:https://www.zhihu.com/question/31592553

    跨域+springmvc  http://blog.csdn.net/wabiaozia/article/details/52778335

    跨域:ajax跨域,这应该是最全的解决方案了http://web.jobbole.com/93344/

    阮一峰 跨域资源共享 CORS 详解:http://www.ruanyifeng.com/blog/2016/04/cors.html --必看

    跨域CORS和防止CSRF的几种方式:https://my.oschina.net/hosee/blog/903665  --必看


    原文链接:https://blog.csdn.net/wabiaozia/article/details/78771709

    展开全文
  • 解决sockJs实现的websocket的跨域问题,后台使用的springboot框架,maven
  • 本篇文章主要讲诉了前端跨域问题的几种解决方案,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 分享转载:前端常见跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx...
  • Spring Boot 面试精讲

    千人学习 2019-12-20 15:42:07
    面试了一些人,简历上都说自己熟悉 Spring Boot, 或者说正在学习 Spring Boot,一问他们时,都只停留在简单的使用阶段,很多东西都清楚,也让我对面试者大失所望。本门课程就 Spring Boot讲解常见面试题。
  • 前端手机端解决跨域问题

    千次阅读 2020-09-09 10:17:33
    前端解决跨域问题 前台和后台联调进行ajax通信的时候经常遇到这个问题,你发送的请求遇到跨域了。 这是控制台打印出跨域问题的错误,也是浏览器的同源限制策略。所以我们要解决跨域问题。 我设置过vue.config.js...

    前端解决跨域问题

    前台和后台联调进行ajax通信的时候经常遇到这个问题,你发送的请求遇到跨域了。
    控制台打印出跨域问题的错误
    这是控制台打印出跨域问题的错误,也是浏览器的同源限制策略。所以我们要解决跨域问题。

    我设置过vue.config.js进行代理。该设置的都弄了遍,结果依然报跨域的问题。

    怎么办呢,其实很简单,在你发送的ajax的请求头上携带一句话就能解决这个问题。

    header: {
        'content-type': 'application/x-www-form-urlencoded',
        "Access-Control-Allow-Origin": '*'
       },
    

    这样跨域问题就解决了!!!!

    展开全文
  • 与iframe跨域通信和不跨域通信

    万次阅读 多人点赞 2019-06-26 11:49:45
    不跨域通信 主页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <iframe name="myIframe" id=...
  • MVC中跨域解决方案

    2017-08-21 09:16:58
    本案例演示了MVC如何设置跨域
  • 谷歌浏览器跨域插件,解决开发人员本地开发涉及跨域问题 谷歌浏览器跨域插件,解决开发人员本地开发涉及跨域问题 谷歌浏览器跨域插件,解决开发人员本地开发涉及跨域问题
  • 需要从公司文服直接展示pdf,折腾了大半天,网上查了各种资料,都比较坑,自己看官方demo写了一个springboot的demo,下载后修改pdf的地址可以直接运行,完美实现pdf跨域显示
  • 框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 224,915
精华内容 89,966
关键字:

有的手机跨域有的不跨域