Vue + TypeScript 实战项目（二）：轻松处理 CORS 跨域请求，携手扩展应用功能

2023-12-31 17:02:21

跨越浏览器藩篱：理解 CORS 跨域请求

跨域资源共享（CORS）是一套规范，旨在规范不同来源（域名、协议、端口）之间的浏览器HTTP请求。其作用在于确保浏览器仅允许来自受信任来源的请求，保障用户数据安全。

CORS请求的本质是浏览器向服务器发送预检请求（preflight request），询问服务器是否允许该请求。服务器在收到预检请求后，会返回一个包含CORS头部（如Access-Control-Allow-Origin）的响应，告知浏览器是否允许该请求。

服务端代理助力：跨越 CORS 藩篱

为了解决 CORS 跨域请求问题，我们需要引入服务端代理。服务端代理充当中间人，将客户端请求转发给服务器，同时处理 CORS 相关头部，允许跨域请求的顺利进行。

服务端代理使用方法

安装 node.js 和 express.js
创建一个新的 Node.js 项目
在项目中安装 express.js
创建一个简单的服务器
配置代理路由

服务端代理实例

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

// 配置代理路由
app.use('/api', (req, res, next) => {
  // 设置允许跨域的头部
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');

  // 转发请求
  const options = {
    url: `https://example.com${req.url}`,
    method: req.method,
    headers: req.headers,
    data: req.body,
  };

  request(options, (error, response, body) => {
    if (error) {
      return next(error);
    }

    // 将服务器响应转发给客户端
    res.json(body);
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});