JavaScript

超轻量级php框架startmvc

node跨域请求方法小结

更新时间:2020-06-01 18:18:01 作者:startmvc
本文介绍了node跨域请求,主要介绍了两种方法,一种是jsonp,另一种res.wirteHead,具体如下

本文介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

node跨域 nodejs 跨域 node 跨域请求