第三方包 vue-resource
注意：
假设当前服务器后台监听的端口是 7000
1，get post 既可以请求数据，也可以发送数据
2，请求的是 服务器 所在的 url 路径（http://localhost:7000/add），当然，如果你的客服端也是由 node 后台直接读写文件返回的 html 文件。那么证明 该 html 页面也是放在该和后台监听的 同一个端口下面。就可以不写全请求的url（如：/add 注意：那么就相当于请求; http://localhost:7000/add）
3 , jsonp 是用 script 标签来完成跨域请求的 （请求 url,然后返回 res.end('cb(data))'）由html里面书写 js 函数自行操作
注意：form 表单提交数据，如果 在 <input type='submit‘> 中添加点击事件，那么 form 表单提交的数据就不会在 url 处 自动拼接数据（/add?id=&name=）。拼接后是会有数据的 （/add?id=123&name= zhangsan）
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
this.$http.jsonp('https://suggest.taobao.com/sug?q=笔&callback=sug').then(function (result) {
console.log(result);
console.log(result.body);
})
List of shortcut methods:
-
get(url, [config]) -
head(url, [config]) -
delete(url, [config]) -
jsonp(url, [config]) -
post(url, [body], [config]) -
put(url, [body], [config]) -
patch(url, [body], [config])
Config
| Parameter | Type | Description |
|---|---|---|
| url | string |
URL to which the request is sent |
| body | Object, FormData, string |
Data to be sent as the request body |
| headers | Object |
Headers object to be sent as HTTP request headers |
| params | Object |
Parameters object to be sent as URL parameters |
| method | string |
HTTP method (e.g. GET, POST, ...) |
| responseType | string |
Type of the response body (e.g. text, blob, json, ...) |
| timeout | number |
Request timeout in milliseconds (0 means no timeout) |
| credentials | boolean |
Indicates whether or not cross-site Access-Control requests should be made using credentials |
| emulateHTTP | boolean |
Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header |
| emulateJSON | boolean |
Send request body as application/x-www-form-urlencoded content type |
| before | function(request) |
Callback function to modify the request object before it is sent |
| uploadProgress | function(event) |
Callback function to handle the ProgressEvent of uploads |
| downloadProgress | function(event) |
Callback function to handle the ProgressEvent of downloads |
1. get post jsonp三种请求方式
<!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></title> <script type="text/javascript" src="../vue.js"></script> <!-- 注意：vue-resource 依赖于 Vue,所以要注意加载顺序 --> <script type="text/javascript" src="../vue-resource.min.js"></script> </head> <body> <div id="app"> <input type="button" name="" value="get请求" @click='getInfo'> <input type="button" name="" value="post请求" @click='postInfo'> <input type="button" name="" value="jsonp请求" @click='jsonpInfo'> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{}, methods:{ getInfo() { this.$http.get('https://api.apiopen.top/singlePoetry').then(function (result) { console.log(result.data); }) }, /* 三个参数： 参数1：url请求路径 参数2：{body}请求体内容 参数3：config 配置项 比如设置（application/x-www-form-urlencoded） 提交数据的方式。 */ postInfo() { this.$http.post('https://api.apiopen.top/singlePoetry',{发送的数据},{emulateJSON:true}).then(function (result) { console.log(result); }) }, jsonpInfo() { this.$http.jsonp('https://suggest.taobao.com/sug?q=笔&callback=sug').then(function (result) { console.log(result); console.log(result.body); }) } } }); </script> </body> </html>
###
node 仿 jsonp 请求
跨域请求
注意：服务端返回形式是 当你客户端发起请求时，服务端以 res.write() 的形式返回给客户端的
跨域请求 的 script 标签中 （以字符串的形式）
客户端
<!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></title> </head> <body> <script type="text/javascript"> function showInfo(data) { console.log(data); } </script> <script src="http://127.0.0.1:8000/getscript?callback=showInfo"></script> </body> </html>
服务端
const http =require('http');
const url = require('url');
const querystring = require('querystring');
http.createServer((req,res)=>{
// const url = req.url;
// var myURL = url.parse('https://user:pass@sub.host.com:8080/p/a/t/h?query=string#hash');
// console.log(myURL);
// var querystr = querystring.parse(myURL.query);
// console.log(querystr);
const getURL = url.parse(req.url,true);
console.log(getURL);
if(getURL.pathname === '/getscript') {
var data = {
name:'little'
};
var scriptStr = `${getURL.query.callback}(${JSON.stringify(data)})`;
res.end(scriptStr);
}
else {
res.write("console.log('not found');");
res.end();
}
}).listen(8000,()=>{
console.log('localhost:8000');
});
