本地搭建最简单的跨域案例，全面了解跨域解决方法

前端

2023-09-23 21:03:53

简单demo学习各种跨域

跨域是一个常见的网络安全问题，当一个网站或应用程序试图从另一个网站或应用程序获取资源时，就会发生跨域问题。这是由于浏览器的同源策略（SOP）所致，SOP旨在防止恶意网站访问敏感数据。

本地运行跨域demo可以帮助开发人员更好地理解和解决跨域问题。本文提供了多种本地运行的跨域案例，包括 CORS、JSONP、WebSocket 等，并介绍了对应的解决方法和安全性问题。

CORS

CORS（跨域资源共享）是一种允许浏览器跨域访问资源的机制。它通过在服务器端设置 CORS 头来实现，允许特定的域访问受保护的资源。

为了在本地运行 CORS demo，您可以使用以下步骤：

在本地计算机上安装 Node.js 和 Express.js。
创建一个新的 Express.js 项目。
在项目中安装 cors 模块。
在 Express.js 应用程序中添加以下代码：

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

const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello, world!' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

启动 Express.js 应用程序。
在浏览器中打开以下 URL：

http://localhost:3000/api/data

您应该会看到以下响应：

{
  "message": "Hello, world!"
}

这表明您已经成功地配置了 CORS，并可以在本地运行跨域请求。

JSONP

JSONP（JSONP with Padding）是一种允许浏览器跨域获取 JSON 数据的机制。它通过在 URL 中添加一个回调函数参数来实现。

为了在本地运行 JSONP demo，您可以使用以下步骤：

在本地计算机上安装 Node.js 和 Express.js。
创建一个新的 Express.js 项目。
在项目中安装 jsonp 模块。
在 Express.js 应用程序中添加以下代码：

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

const app = express();

app.get('/api/data', (req, res) => {
  const callback = req.query.callback;

  jsonp(res, { message: 'Hello, world!' }, callback);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

启动 Express.js 应用程序。
在浏览器中打开以下 URL：

http://localhost:3000/api/data?callback=myCallback

您应该会看到以下响应：

myCallback({
  "message": "Hello, world!"
});

这表明您已经成功地配置了 JSONP，并可以在本地运行跨域请求。

WebSocket

WebSocket 是一种允许浏览器与服务器进行双向通信的协议。它可以用于构建实时应用程序，例如聊天室和在线游戏。

为了在本地运行 WebSocket demo，您可以使用以下步骤：

在本地计算机上安装 Node.js 和 Socket.IO。
创建一个新的 Node.js 项目。
在项目中安装 socket.io 模块。
在 Node.js 应用程序中添加以下代码：

const express = require('express');
const socketIO = require('socket.io');

const app = express();

const server = app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('Client connected');

  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);

    io.emit('message', message);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});