CodeSandbox 问题梳理

写在前面

当本地的代码希望在 ipad 或者移动端可以访问时，有很多种方式可以尝试，比如：

• 本地计算机启动服务，移动端配置代理访问本机 ip 服务；
• 发布到服务器，通过域名/IP 访问；
• 通过 codesandbox/vercel 部署在线服务，通过地址访问
• …

因为需要支持其他移动端也能够访问服务，第一点仅限同一局域网条件下，也就抛弃了第一条。第二点，需要购买服务器资源，当然这样会更安全一些。而我选择了第三条，能够通过在线编辑平台，直接部署项目，并提供可供外部访问的链接。其缺点是代码存在泄漏问题，但是由于是个人学习的项目代码，也就不在乎了。

言归正传，本文用于记录在使用 codesandbox 遇到的问题，并提供解决思路。
如果不正确的地方，还望批评指正～

问题1：codesandbox 转发接口 405

原因

为了转发请求到后端接口，项目在 package.json 里配置了转发到后端接口的配置：

"proxy": "https://api.backend.com"

而前端请求接口 localhost:3000/api 访问接口请求，并获取数据。显然这个在本地是完全没有问题，但是在 codeSandbox 里，所有转发的请求均报错 405。
其原因可以理解为前端项目转发的接口并没有转发，而是在本地，因为创建 react 的项目，它并不会启动服务去转发接口。

解决方法

1. 根目录下新建 sandbox.config.json
2. 添加代码块：{ "template": "node" }
   这样是告诉 codeSandbox 采用 node 的解析方式运行项目。但是有个问题，在已有的 sanbox 项目里新增该文件并不会生效，而是需要在项目引入之初，就采用 node 的方式进行引入。可通过创建空白的 node 项目或者是由 github 引入仓库代码。

问题2：页面 Invalid Host Header

那么问题1解决了，紧跟着问题2就来了。
启动 node 服务后，页面直接报错提示：Invalid Host Header。

原因

启动服务器时出现 “ Invalid Host header ” 错误是因为 webpack-dev-server 软件包从 2.4.4 版本开始添加了主机检查。

解决方法

方案一

新增 webpack.config.js 配置可访问服务的域名地址，如果允许所有域名访问，可以添加为 ‘all’。代码样例：

// webpack.config.js
//...
module.exports = {
//...
  devServer: {
     allowedHosts: ['.preview.csb.app'] // <  Copy and paste the domain from the URL Codebox provides for your runtime here
  },
};

而如果 webpack 版本小于 4.0.0 的话，需要配置如下：

// webpack.config.js
//...
module.exports = {
//...
	devServer: {
	    historyApiFallback: true,
	    disableHostCheck: true,
	}
};

我没采用该方法，具体可参照文章：Invalid Host header when starting your server [Solved]

方案二

对于 react 的，简单方式可以在根目录下创建 .env 文件，并配置如下：

// .env
DANGEROUSLY_DISABLE_HOST_CHECK=true

结束

以上是我开发过程中遇到的问题和总结，还请多多指教。