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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
jQuery入门知识简介
Mar 04 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
javascript前端实现多视频上传
Dec 13 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中一些可能会被忽略的问题
2013/06/21 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python文件及目录操作代码汇总
2020/07/08 Python
python palywright库基本使用
2021/01/21 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
解决margin 外边距合并问题
2019/07/03 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
ubuntu下常用apt命令介绍
2022/06/05 Servers