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 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
js中日期的加减法
May 06 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
js中时间格式化的几种方法
Jul 22 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php5.2时间相差8小时
2007/01/15 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
PHP 学习路线与时间表
2010/02/21 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP图片加水印实现方法
2016/05/06 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
Python可跨平台实现获取按键的方法
2015/03/05 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python数据爬下来保存的位置
2020/02/17 Python
Python可以实现栈的结构吗
2020/05/27 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
三星英国官网:Samsung英国
2018/09/25 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
数学专业推荐信范文
2013/11/21 职场文书
收款委托书
2014/10/14 职场文书
交通安全月活动总结
2015/05/08 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
导游词之太湖
2019/10/08 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python