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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 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
第五节 克隆 [5]
2006/10/09 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
实现高性能javascript的注意事项
2019/05/27 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
如何安装ruby on rails
2014/02/09 面试题
计算机毕业生求职信
2014/06/10 职场文书
新闻学专业求职信
2014/07/28 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
信用卡催款律师函
2015/05/27 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电