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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
javascript测试题练习代码
Oct 10 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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调用Oracle存储过程
2006/10/09 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python冲顶大会 快来答题!
2018/01/17 Python
解决DataFrame排序sort的问题
2018/06/07 Python
详解Python字典的操作
2019/03/04 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
《蒲公英》教学反思
2014/02/28 职场文书
园艺师求职信
2014/03/10 职场文书
禁止酒驾标语
2014/06/25 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
总结几个非常实用的Python库
2021/06/26 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python