有两个运行react但在不同端口上的Visual Studio代码窗口

基础概念

React 是一个用于构建用户界面的 JavaScript 库，特别适合构建单页应用程序（SPA）。Visual Studio Code（VS Code）是一个流行的代码编辑器，支持多种编程语言和开发工具。

在不同的端口上运行两个 React 应用程序意味着每个应用程序都在其独立的服务器实例中运行，监听不同的网络端口。这通常用于开发和测试环境中，以便同时运行和比较多个版本的应用程序或不同的功能分支。

类型与应用场景

开发环境：开发者可以在不同的端口上运行多个版本的代码，便于对比和调试。
测试环境：自动化测试脚本可以针对不同端口的应用程序执行测试用例。
演示和展示：在同一台机器上展示多个版本的应用程序给客户或团队成员。

遇到的问题及原因

常见问题

端口冲突：如果两个应用程序试图使用相同的端口，会导致启动失败。
跨域请求问题：如果一个应用需要访问另一个应用的 API，可能会因为同源策略而遇到跨域问题。

原因分析

端口冲突：操作系统限制同一端口只能被一个进程监听。
跨域问题：浏览器的安全策略限制了不同源之间的资源交互。

解决方案

端口冲突

确保每个 React 应用程序配置了不同的端口号。可以在 package.json 文件中的 scripts 部分修改启动命令，例如：

// 第一个应用
"scripts": {
  "start": "react-scripts start --port 3000"
}

// 第二个应用
"scripts": {
  "start": "react-scripts start --port 3001"
}

跨域请求问题

可以通过设置代理来解决跨域问题。在 React 应用的 src 目录下创建 setupProxy.js 文件，并配置代理规则：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001', // 目标服务器地址
      changeOrigin: true,
    })
  );
};

这样，当第一个应用向 /api 发起请求时，会被代理到第二个应用的服务器上。

示例代码

假设我们有两个简单的 React 应用程序，分别位于 app1 和 app2 目录中。

app1/package.json:

{
  "name": "app1",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start --port 3000"
  },
  ...
}

app2/package.json:

{
  "name": "app2",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start --port 3001"
  },
  ...
}

在 app1/src/setupProxy.js 中配置代理：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

通过以上配置，两个应用可以在不同的端口上独立运行，并且第一个应用可以通过代理访问第二个应用的 API 资源。