node跨域方法

2024年2月19日 99次阅读 来源: kimqifu 
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()">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>
    原文作者：kimqifu
    原文地址: https://segmentfault.com/a/1190000010829174
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞