使用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. 正则表达式匹配URL或者网址

    正则表达式 (http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])? ...

  2. [转]android sqlite db-journal文件产生原因及说明 .

    http://blog.csdn.net/kaiwii/article/details/8609093 今天在android中将sqlite的数据库文件生成在SD卡上的过程中,发现生成的.db文件的旁 ...

  3. 2018牛客网暑假ACM多校训练赛（第四场）C Chiaki Sequence Reloaded (组合+计数) 或 数位dp

    原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round4-C.html 题目传送门 - https://www.no ...

  4. 麒麟Kylin

    开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(MOLAP)能力以支持超大规模数据,能在亚秒内查询巨大的Hive表: Kylin的主要特点包括支持SQL接口.支持超大 ...

  5. Trident中的过滤与函数的区别

    1.共同点 都需要实现storm.trident.operation.Function接口 2.不同点 其中函数有发射这个步骤. .each(new Fields("orderTime&qu ...

  6. Ubuntu 装机软件

    Ubuntu16.04 软件商店闪退打不开 sudo apt-get update sudo apt-get dist-upgrade # 应该执行一下更新就好,不需要重新安装软件中心 sudo ap ...

  7. day 50 js-part1基础语法，数据类型及用法，流程控制语句，循环

    js基本概念: JavaScript 是世界上最流行的脚本语言. JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript ...

  8. java定时任务以及Spring使用Quartz调度器执行定时任务

    java下的java.util.Timer中类可以实现定时执行任务的执行: 如:让任务立即执行,每隔1s循环执行一次 public class TimerClass { public static v ...

  9. Mybatis下collections使用pageHelper进行分页

    pageHelper在对mybatis一对多分页时造成查询总页数结果不对的情况. 可以做出如下修改: service层: public CommonResult worksList(String us ...

  10. JavaOO面向对象中的注意点（一）

    1.JavaOO宗旨思想: ★万物皆对象,对象因关注而产生★ ☆类是对象的抽取,对象是类的实例☆ 2.JavaOO的三大特征: 封装.继承.多态  (第四大特征 抽象 现还有争议) 3.属性与行为: ...