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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
Javascript设计模式之原型模式详细
Oct 05 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中get_defined_constants函数用法实例分析
2015/05/12 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python制作简单五子棋游戏
2019/06/18 Python
django的csrf实现过程详解
2019/07/26 Python
Python实现TCP通信的示例代码
2019/09/09 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
销售经理工作职责
2014/02/03 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
会议邀请函
2015/01/30 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
确保工程质量承诺书
2015/04/29 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers