Node.js 解决跨域问题：JSONP与CORS响应头配置详解

本文总结了 Node.js 中处理跨域请求的两种常见方式。第一种是基于 JSONP 的服务实现，适用于支持脚本加载的场景；第二种是通过 res.writeHead 设置响应头，重点配置 Access-Control-Allow-Origin 等字段以支持现代浏览器的跨域标准。文章提供了 Node.js 服务端与前端 HTML/AJAX 调用的完整代码示例，帮助开发者快速解决跨域问题。

方案二：响应头配置（CORS）

第二种方法是通过 res.writeHead 设置响应头。

Node.js 服务端代码部分如下。


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 与 JavaScript 部分代码如下。

前端调用示例


<!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.js 跨域请求的完整解决方案，希望对学习有所帮助。

Node.js 实现跨域请求的两种方案：JSONP 与 Access-Control-Allow-Origin

Node.js 跨域请求概述

方案一：JSONP 实现

方案二：响应头配置（CORS）

前端调用示例

实用工具推荐