使用vue-resource发送跨域请求
axios不支持跨域
  • 1 安装vue-resource并引入
cnpm install vue-resource -S
  • 2 基本用法
使用this.$http发送请求
this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options]) 
 
<!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>vue</title>

    <script src="https://unpkg.com/vue"></script>

    <script src="vue-resource/vue-resource.min.js"></script>

    <script>

        window.onload=function(){

            let app = new Vue({

                el:'.container',

                data:{

                },

                methods:{

                    sendJSONP(){

                        //https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a

                        this.$http.jsonp('https://sug.so.360.cn/suggest',{

                            params:{

                                word:'a'

                            }

                        }).then(response => {

                            console.log(response.data);

                        },response =>{

                            console.log('请求失败');

                        })

                    },

                    sendJSONP2(){

                        //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1443_25549_21113_20930&req=2&csor=1&cb=jQuery110207073365804113201_1515466757822&_=1515466757826

                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

                            params:{

                                wd:'a'

                            },

                            jsonp:'cb' //百度使用的jsonp的参数名为 cb

                        }).then(response => {

                            console.log(response.body);

                        },response => {

                            console.log('发送失败');

                        })

                    }

                }

            })

        }

    </script>

</head>

<body>

<div class="container">

    <!-- 跨域发送请求 -->

    <button v-on:click='sendJSONP'>向360搜索发送JSONP请求</button>

    <button v-on:click='sendJSONP2'>向baidu搜索发送JSONP请求</button>

</div>

</body>

</html>

Vue（八）发送跨域请求的更多相关文章

  1. Vue-cli3.x中使用Axios发送跨域请求的配置方法

    Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...

  2. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  3. Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...

  4. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  5. 利用 img 和 script 发送跨域请求

    利用img.src可以发送http请求,但是发送http请求不是img.src的真正用意. 同样,用script.src去请求jsonp格式的接口数据也不是script元素的最初设计用途. 但是这些歪 ...

  6. xhr.withCredentials发送跨域请求凭证

    一.前言 今天遇到一个坑,浏览器请求数据的时候gg了.浏览器报错如下图: 因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Al ...

  7. vue axios跨域请求，apache服务器设置

    问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...

  8. vue axios跨域请求，代理设置

    在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...

  9. Ajax和跨域请求

    Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...

随机推荐

  1. adb devices unauthorized解决办法

    进行Android项目调试时,连接完设备,进行adb install ******.apk时,偶遇 adb devices unauthorized 这个小东西,解决办法:将手机设置->辅助功能 ...

  2. python之PIL 二值图像处理和保存

    0. 1.参考 http://pszpcl.baike.com/article-77327.htmlwindows 图片右键:属性 详细信息 位深度位深度 用于指定图像中的每个像素可以使用的颜色信息数 ...

  3. rxjs简单入门

    rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...

  4. 浅谈Rsync+Inotify实时同步

    Rsync是Unix/Linux旗下的一款应用软件,利用它可以是多台服务器数据保持同步一致性,第一次同步时rsync会复制全部内容,但在下次只传输修改过的文件 Rsync在传输数据的过程中可以实行压缩 ...

  5. CSS改变插入光标颜色caret-color

    CSS代码: input { color: #333; caret-color: red; } @supports (-webkit-mask: none) and (not (caret-color ...

  6. PHP生成二维码,PHPQRCode

    声明一个方法,直接调用即可 <?php /** * 功能:生成二维码 * @param string $qr_data 手机扫描后要跳转的网址 * @param string $qr_level ...

  7. ajax请求后台，response.sendRedirect失效，无法重定向

    今天在写项目的时候,想加一个切换用户,需要清除session并且跳转到登录页面,发起一个ajax请求后,执行完发现无法跳转. 原因在于: (从网上摘录) Ajax只是利用脚本访问对应url获取数据而已 ...

  8. 007 numpy数组文件的存取

    不知道这个有没有用,都整理了一番. 一:数组以二进制格式进行存储 1.说明 np.save与np.load是读写磁盘数组数据的两个重要函数. 默认情况下,数组以压缩的原始二进制格式保存在扩展名为npy ...

  9. Flume配置文件写法总结

    一.agent 第一步是定义agent(代理)及agent下的sources.channels.sinks的简称,如下: a1.sources = r1 a1.sinks = k1 a1.channe ...

  10. Windows10家庭版如何升级至Windows10专业版

    Windows10家庭版和专业版系统文件其实是一样的iso镜像文件,但是由于Microsoft某些限制导致一些用户无法享受到专业版的福利,说实话这是一种很让人蛋疼的操作... 接下来我来告诉各位如何把 ...