node跨域请求方法小结

来源：动视网责编：小采时间：2020-11-27 22:31:45

node跨域请求方法小结

node跨域请求方法小结:本文介绍了node跨域请求，主要介绍了两种方法，一种是jsonp，另一种res.wirteHead，具体如下：第一种：jsonp 参看用nodejs实现json和jsonp服务第二种：res.wirteHead node部分 var http = require('http') var url

推荐度：

点击下载本文 文档为doc格式

导读node跨域请求方法小结:本文介绍了node跨域请求，主要介绍了两种方法，一种是jsonp，另一种res.wirteHead，具体如下：第一种：jsonp 参看用nodejs实现json和jsonp服务第二种：res.wirteHead node部分 var http = require('http') var url

本文介绍了node跨域请求，主要介绍了两种方法，一种是jsonp，另一种res.wirteHead，具体如下：

第一种：jsonp

参看用nodejs实现json和jsonp服务

第二种：res.wirteHead

node部分

var http = require('http')
var url = require('url')
var querystring = require('querystring')

var port = 9000
var jsonData = { 'name': 'xiaohong', 'job': 'daboss' }
http.createServer(function (req, res) {
 // var pathStr = url.parse(req.url)
 res.writeHead(200, {
 'Content-Type': 'application/json;charset=utf-8',
 'Access-Control-Allow-Credentials': true,
 'Access-Control-Allow-Origin': '*'
 })
 var type = req.method;
 if (type == 'GET') {
 
 res.end(JSON.stringify(jsonData))
 } else if (type == 'POST') {
 var str = '';
 req.on('data',function(chunk){
 str += chunk;
 })
 
 req.on('end',function(){
 var data = querystring.parse(str)
 console.log(data)
 if(data.name == "" || data.job == ""){
 res.end(JSON.stringify({'success':true,msg:'填写有误'}))
 }else{
 res.end(JSON.stringify({'success':false,msg:'添加成功'}))
 }

 })
 }

}).listen(port, function () {
 console.log('server is runing at port ' + port)
})

重点部分是添加响应头信息

 res.writeHead(200, {
 'Content-Type': 'application/json;charset=utf-8',
 'Access-Control-Allow-Credentials': true,
 'Access-Control-Allow-Origin': '*' //可以是*，也可以是跨域的地址
 })

在ajax里不需要做任何特殊处理

dataType仍旧是json

html部分

<!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>Document</title>
</head>
<body>
 <a class="click" href="javascript:get_jsonp()" rel="external nofollow" >click me</a>
 <p class="result"></p>
 <label>姓名:</label>
 <input class="name" type="text" />
 <label>职位：</label>
 <input class="job" type="text">
 <a class="add" href = "javascript:add()">添加</a>
 <p class="msg"></p>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 function get_jsonp() {
 $.ajax({
 type: 'get',
 dataType: 'json',
 url: 'http://localhost:9000',
 success: function (data) {
 $('.result').html('my name is ' + data.name)
 },
 error: function (err) {
 $('.result').html('出错了 ' + err.status)
 }
 })
 }
 function add(){
 $.ajax({
 type:'post',
 url:'http://localhost:9000',
 dataType:'json',
 data:{
 'name':$(".name").val(),
 'job':$(".job").val()
 },
 success:function(data){
 $('.msg').html(data.msg)
 },
 error:function(err){
 
 $('.msg').html('出错了'+err.status)
 }
 })
 }
 </script>
</body>
</html>

node跨域请求方法小结

推荐度：

点击下载本文 文档为doc格式

标签：方法访问总结

热门焦点

node跨域请求方法小结

node跨域请求方法小结

node跨域请求方法小结

最新推荐

猜你喜欢

热门推荐