nodejs搭建本地服务器轻松解决跨域问题

当我们在前端开发中使用异步请求数据时，经常会遇到跨域问题，这时候可以通过搭建一个本地服务器来解决跨域问题。这里给大家分享一下使用nodejs搭建本地服务器的攻略。

准备工作

要使用nodejs搭建本地服务器，需要先安装nodejs，安装完成后打开命令行窗口（Windows键+R，输入cmd），输入以下命令，查看nodejs是否安装成功：

node -v

如果出现类似以下的版本号信息，则说明nodejs已经安装成功：

v14.15.4

搭建本地服务器

第一步，创建一个项目文件夹，比如“local_server”，在命令行中进入该文件夹，执行以下命令初始化一个新的nodejs项目：

npm init -y

执行完该命令后，该文件夹下会有一个package.json文件。

第二步，安装express模块，express是nodejs的一个常用框架，可用于快速搭建web应用的基本结构，命令如下：

npm i express

第三步，创建服务器文件server.js，该文件建立服务器，并对跨域进行设置，代码如下：

const express = require('express')
const app = express()
const port = 3000 // 端口号自定义

// 允许所有源跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With")
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
    next()
})

// 监听端口
app.listen(port, function() {
    console.log(`服务器已经启动，端口号：${port}`)
})

第四步，启动服务器，命令如下：

node server.js

如果看到控制台输出“服务器已经启动，端口号：3000”等信息，则说明服务器启动成功。

测试服务器

为了验证服务器是否能正常工作，可以编写一个简单的html页面，从服务器异步获取一些数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Local Server</title>
</head>
<body>
    <div>
        <h2>测试本地服务器</h2>
        <ul id="dataList"></ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $.ajax({
            url: 'http://localhost:3000/test', // 服务器地址
            type: 'get',
            success: function(result) {
                console.log(result)
                let dataListHtml = ''
                for(let i = 0; i < result.length; i++) {
                    dataListHtml += `<li>${result[i].name} - ${result[i].age}</li>`
                }
                $('#dataList').html(dataListHtml)
            }
        })
    </script>
</body>
</html>

上面的html代码中，通过jquery的ajax方法访问http://localhost:3000/test接口，该接口在服务器端返回一个json字符串，用于测试服务器是否正常工作。测试时需要将该html文件放在服务器下，并通过服务器地址访问html文件。

服务器端修改server.js代码，添加一个测试接口：

app.get('/test', function(req, res) {
   let dataList = [
       {"name":"Tom", "age":20},
       {"name":"Jerry", "age":18},
       {"name":"Lucy", "age":19}
   ]
   res.json(dataList) // 返回json字符串
})

这里我们模拟一个简单的数据列表，get请求该接口能够返回dataList数据，接口的地址 /test 与上面的html代码一致。

启动服务器，

node server.js

打开浏览器，访问服务器下的html文件，如果看到页面中展示有数据列表，则说明服务器正常工作，跨域问题已经解决。

至此，一个使用nodejs搭建的本地服务器，就已经完成了。在实际开发中，如果在后台的api接口中出现跨域，可以通过搭建服务器并添加上文提到的相关代码，轻松解决跨域问题。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs搭建本地服务器轻松解决跨域问题 - Python技术站

nodejs搭建本地服务器轻松解决跨域问题

准备工作

搭建本地服务器

测试服务器

相关文章