Typescript开发React备注

开发前端谷歌浏览器插件思路

1. 使用 Typescript + React 开发页面

2. 使用node.js，构建本地服务器，完成网络请求转发，避免本地调试时出现跨域请求异常。

3. 使用 Nginx 部署本地服务器，模拟页面加载和跳转的完整流程。

4. 使用 webpack 处理模块依赖，合并 js 代码为单一 js 文件，生成 content-script.js background.js pop.js 等

 

基础准备

1. node.js + npm 安装 （或yarn等包管理工具）

brew install node

或者前往下载安装包

https://nodejs.org/zh-cn

2. react + typescript 安装

npm install -g typescript

npx create-react-app my-app --template typescript

3.创建代理服务项目

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

{
  "name": "proxy-server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "http-proxy-middleware": "^3.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.14.10",
    "typescript": "^5.5.3"
  }
}

 

import express from 'express';
const cors = require('cors');
import { createProxyMiddleware } from 'http-proxy-middleware';

const app = express();

const corsOptions = {
    origin: 'http://localhost:8080', // 针对来源于该域名和端口的请求允许跨域
    optionsSuccessStatus: 200 // 一些老旧的浏览器会对204状态码进行错误处理
};

app.use(cors(corsOptions));

app.use('/api', createProxyMiddleware({
// http://localhost:3001/api/test 将转发到 https://xx.xx.app/test 
    target: 'https://xx.xx.app', // 转发的目标服务器地址
    changeOrigin: true,
    pathRewrite: {
        '^/api': '',
    },
}));

const PORT = 3001; // 本地服务端口号

app.listen(PORT, () => {
    console.log(`Proxy server is running on http://localhost:${PORT}`);
});

4. 安装和运行Nginx服务

brew install nginx

nginx -v //查看版本

nginx -t //查看配置文件地址

sudo nginx //启动

sudo nginx -s reload //重新加载配置文件

sudo nginx -s stop //停止

 

Nginx配置文件

/* nginx.conf */

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /opt/homebrew/etc/nginx/html; // 网站项目地址（使用绝对地址）
            index  index.html index.htm;
        }
    
    location = /reset_password {
            try_files $uri $uri/ /index.html; // 页面地址转发，分别尝试后面的几个文件
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;



    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    include servers/*;
}

 

1. fetch发送HTTP请求遭遇 502 Bad Gateway 错误

因为当前页面时HTTPS域名，请求HTTP内容是不安全的操作，所以被阻止了。需要后端支持HTTPS请求，或者使用支持HTTPS的接口来进行转发请求。