注意：
假设当前服务器后台监听的端口是 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');
});
