跨域问题及其解决方案

Review

  1. 2023-11-03 07:33

一、背景 #

存在两种情况：

  1. A域名下请求B域名API
  2. https服务请求指定IP的http、WebSocket服务

二、解决方案 #

方案介绍优势不足评级
用户通过本地Nginx代理实现方案成熟，用户可完全自定义代理- 需要了解Nginx

- 需要用户配置

- Nginx初次配置会有各种异常需要排查		🌟🌟🌟
用户通过Webpack Proxy进行配置简单方便- 只能代理API，不能代理CloudIDE服务

- 需要用户配置		🌟🌟🌟
新增一个Proxy服务- 简单方便，用户仅需在页面配置

- 能代理WS服务，Preview服务和API服务		- 需要开发调试

- 用户在个人电脑终端开启服务		🌟🌟🌟🌟🌟
配置一个Browser Extension- 通过拦截请求，可以修改请求的域名，方便可靠- 需要开发调试

- 需要用户安装

- 不支持对WS请求进行监听处理		🌟🌟🌟🌟
开启一个非安全模式的浏览器窗口- 对于API CORS请求很方便- 不能解决代理WS服务

- 非安全模式的Chrome对于书签、历史记录同步有些问题		🌟🌟🌟🌟
配置ServiceWorker拦截器- 便于缓存静态资源

- 便于拦截处理Fetch请求		- 不支持XHR请求监听和处理🌟🌟🌟

XMLHttpRequest is not exposed for service workers, XMLHttpRequest isn’t supported by Service Workers.

三、设计实现 #

3.1、解决跨域 #

3.1.1、打开非安全模式浏览器窗口 #

用于调试 API 跨域请求

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=~/Documents/ChromeDevUserData
3.1.2、可修改 webpack-dev-server 配置，增加如下proxy配置 #
module.exports = {
	proxy: {
		"/api": {
    	enable: true,
      target: 'http://127.0.0.1:9000',
      changeOrigin: true,
      secure: false
    }
  }
};

3.2、解决CloudIDE调试问题 #

3.2.1、Nginx代理 #

详见： 物料生产-使用指南

TODO：实现一个自动化的 Nginx 代理，仅通过一个CLI命令即可实现。

3.2.2、自实现代理服务 #

用户只需要执行CLI命令，启动一个本地服务，即可调试指定IP的服务。

node-http-proxy

Reference #