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获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
Vue header组件开发详解
Jan 26 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
js实现整体缩放页面适配移动端
2020/03/31 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
个人简历的自荐信
2013/10/23 职场文书
新学期家长寄语
2014/01/19 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
单位综合评价意见
2015/06/05 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技