Vue（八）发送跨域请求
axios不支持跨域
- 1 安装vue-resource并引入
- 2 基本用法
<!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（八）发送跨域请求的更多相关文章
- Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...
- vue实现跨域请求的设置
vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...
- Vue ajax跨域请求
Vue webpack-dev-server实现跨域请求 思路 配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写 Vue里定义一个全部变量:site Vue.pro ...
- 本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
- 利用 img 和 script 发送跨域请求
利用img.src可以发送http请求,但是发送http请求不是img.src的真正用意. 同样,用script.src去请求jsonp格式的接口数据也不是script元素的最初设计用途. 但是这些歪 ...
- xhr.withCredentials发送跨域请求凭证
一.前言 今天遇到一个坑,浏览器请求数据的时候gg了.浏览器报错如下图: 因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Al ...
- vue axios跨域请求，apache服务器设置
问题所在axios请求会发送两次请求 也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求. 思路: 跨域--> ...
- vue axios跨域请求，代理设置
在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...
- Ajax和跨域请求
Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
随机推荐
- C语言之字符、整数、数组、字符串笔记
菜单导航 1.变量在计算中的内存分配 2.字符char类型操作 3.整型数据类型操作 4.数组操作和元素地址分配分析 5.数组越界造成的访问不属于自己的内存空间现象 6.引用数据类型和基本数据类型,形 ...
- python生成随机日期字符串
python生成随机日期字符串 生成随机的日期字符串,用于插入数据库. 通过时间元组设定一个时间段,开始和结尾时间转换成时间戳. 时间戳中随机取一个,再生成时间元组,再把时间元组格式化输出为字符串 # ...
- awk命令的用法实战
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn8AAADvCAIAAAAM1SXGAAAgAElEQVR4nO2dz8s125XXHx9oTXMHUZ
- 查看windows电脑CPU核心数,线程数
在Windows中,在cmd命令中输入“wmic”,然后在出现的新窗口中输入“cpu get *”即可查看物理CPU数.CPU核心数.线程数.其中, Name:表示物理CPU数 NumberOfC ...
- Python3爬虫知识点总结
1.requests获取响应头的方法 eg:获取响应头信息 import requests res = request.head(url).headers print(res)
- Visual Studio 2019及其注册码
Visual Studio 2019 更快地进行代码编写.更智能地执行操作.使用同类最佳IDE 创建未来. 下载Visual Studio 使用从初始设计到最终部署的完整工具集 ...
- POJ 2352 Stars【树状数组】
<题目链接> 题目大意: 题目给出n个点,这些点按照y坐标的升序,若y相同,则按照x的升序顺序输入,问,在这些点中,左下角的点的数量分别在0~n-1的点分别有多少个,写出它们的对应点数. ...
- c++基本数据类型及其取值范围
#include<iostream> #include<string> #include <limits> using namespace std; int mai ...
- [ 低危 ] mt网CRLF
漏洞: xxx.meituan.com/%0d%0aevilheadername:%20inject_by_whoamisb 原理猜测: 收到xxx二级域名的时候,会location跳转到该域名(这是 ...
- 2018ddctf wp
杂项 第一题:颜文字 看过以后开始没思路:后来有师傅说是十六进制 我就上网百度了一下http://tieba.baidu.com/p/3717777553 但是不可能是完全十六进制啊,毕竟出题人很羞涩 ...