Node.js原生实现跨域及文件上传：全面解析最佳实践

2023-12-05 09:06:04

跨域请求的原理及CORS配置

跨域请求简单来说就是客户端脚本试图访问与当前页面同源之外的资源，其中“同源”的含义是协议、域名和端口号都相同。

浏览器出于安全考虑，默认会阻止跨域请求，但这在实际开发中会造成诸多不便。为了解决跨域问题，就需要引入CORS（Cross-Origin Resource Sharing）跨域资源共享机制。CORS通过在HTTP请求头中增加一些额外的字段，来告诉浏览器允许跨域请求。

Node.js中可以使用express框架来配置CORS。在express中，可以通过使用中间件的方式来配置CORS。如下是一个简单的CORS配置示例：

const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

在上面的代码中，我们允许所有的域（即'*'）对我们的服务器进行跨域请求，并允许所有的头部（即'Origin, X-Requested-With, Content-Type, Accept'）在跨域请求中使用。当然，你也可以根据实际需求对CORS进行更加细粒度的控制。

文件上传方案

在Node.js中，有两种常见的用于文件上传的方案：内置的multipart/form-data方案和第三方包multer。

1. 使用内置的multipart/form-data方案

multipart/form-data是一种常用的文件上传协议，Node.js内置支持这种协议。使用这种方案，你可以直接使用Node.js的http或express模块来处理文件上传。

const http = require('http');
const fs = require('fs');

http.createServer(function (req, res) {
  if (req.method == 'POST') {
    // 处理文件上传
    var upload = multer({ dest: 'uploads/' });

    upload.single('file')(req, res, function (err) {
      if (err) {
        // 处理错误
      } else {
        // 处理成功
      }
    });
  }
}).listen(8080);

在上面的代码中，我们使用multer包来处理文件上传。multer是一个专门用于处理文件上传的第三方包，它提供了多种配置选项，可以让你轻松地实现文件上传功能。

2. 使用第三方包multer

multer是一个专用于Node.js的文件上传中间件，它可以轻松地解析multipart/form-data格式的请求并保存文件。multer提供了多种配置选项，包括文件大小限制、文件类型限制、文件保存路径等。

const express = require('express');
const multer = require('multer');

const app = express();

// 文件上传配置
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

// 文件上传路由
app.post('/upload', upload.single('file'), (req, res) => {
  // 处理文件上传
  res.json({
    success: true,
    message: 'File uploaded successfully',
    file: req.file
  });
});

app.listen(3000);

在上面的代码中，我们使用multer来处理文件上传。首先，我们需要创建一个storage对象来指定文件上传的目的地和文件名。然后，我们将storage对象作为参数传递给multer函数来创建upload中间件。最后，我们在路由处理函数中使用upload.single('file')来处理文件上传。