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 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...
随机推荐
- HTTP max-age与Expires的分别
主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...
- tomcat优化，java查看
java堆空间分为 新生代 ,老年代 , 持久代 各自有各自的垃圾回收算法 eden区:新生的对象存放在这经常被回收 from .to 存活区 在老年代,回收的频率不是很高 jdk8 就没有持久 ...
- sendfile
Sendfile 函数在两个文件描写叙述符之间直接传递数据(全然在内核中操作,传送),从而避免了内核缓冲区数据和用户缓冲区数据之间的拷贝,操作效率非常高,被称之为零拷贝. Sendfile 函数的定义 ...
- Python题目练习（二）
1.如何实现对python列表去重,并保持原来顺序 li = [1,2,5,3,1,6,3,8,0,3,2,4] l = [] for i in li: if i not in l: l.append ...
- Flask---第二个例子--Get和POST发送
*get:浏览器告诉服务器,我只需要获取页面信息给我,这是最简单最常用的方法 *Post:览器告诉服务器:想在 URL 上 发布 新信息.并且,服务器必须确保 数据已存储且仅存储一次.这是 HTML ...
- Vijos1983 NOIP2015Day2T3 运输计划 transport LCA
题目链接Vijos 题目链接UOJ 该博客在博客园的链接 转载一个大佬的题解: 点击这里->大佬题解 下面谈谈我的感悟: 当然写代码也是写的很艰辛: 我力劝C++的同胞们,这题卡常数,Dfs党会 ...
- P1135 奇怪的电梯 dp
题目描述 呵呵,有一天我做了一个梦,梦见了一种很奇怪的电梯.大楼的每一层楼都可以停电梯,而且第ii层楼(1 \le i \le N)(1≤i≤N)上有一个数字K_i(0 \le K_i \le N)K ...
- 01++ Bookshelf 2
http://poj.org/problem?id=3628 就是比原题多了一个要求,输出>=m的最小值 kisang~独立做出来的都开心<(￣︶￣)> #include<cs ...
- TF：利用TF的train.Saver将训练好的variables(W、b)保存到指定的index、meda文件—Jason niu
import tensorflow as tf import numpy as np W = tf.Variable([[2,1,8],[1,2,5]], dtype=tf.float32, name ...
- Bloxorz I POJ - 3322 （bfs）
Little Tom loves playing games. One day he downloads a little computer game called 'Bloxorz' which m ...