node跨域请求方法小结


Posted in Javascript onAugust 25, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
js模拟类继承小例子
Jul 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
微信小程序实用代码段(收藏版)
Dec 17 Javascript
AngularJS中filter的使用实例详解
Aug 25 #Javascript
微信小程序实现表单校验功能
Mar 30 #Javascript
Angularjs中ng-repeat的简单实例
Aug 25 #Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 #Javascript
Angularjs中数据绑定的实例详解
Aug 25 #Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 #Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
You might like
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
django富文本编辑器的实现示例
2019/04/10 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
大专自我鉴定范文
2013/10/01 职场文书
应聘医药代表职位求职信
2013/10/21 职场文书
音乐系毕业生自荐信
2013/10/27 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
大学生求职自我评价
2014/01/16 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
小学信息技术教学反思
2016/02/16 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
实例讲解Python中sys.argv[]的用法
2021/06/03 Python