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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
jQuery 研究心得 取得属性的值
Nov 30 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
Vue父子传递实例讲解
Feb 14 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页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
项目开发计划书
2014/01/09 职场文书
消防安全汇报材料
2014/02/08 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL