node跨域请求方法小结

2019-11-19 15:40:26

字体：大中小

来源：转载

供稿：网友

本文介绍了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 = 9000var 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：AngularJS 中ui-view传参的实例详解

下一篇：用nodejs实现json和jsonp服务的方法