Since we requrire cookies when doing web development locally, there are two ways to do this:
- Copy & paste the cookies from the browser to the localhost
- Edit
hosts
file, forwarding url of test environment to127.0.0.1
However, the first way is combersome, and the second way requires the edit permission. Therefore, there is another solution.
Installation
- SwitchyOmega is a browser extension, following the normal installation steps.
- Whistle is a npm package, which can be installed by
npm install whistle -g
. It usually starts an servcie on127.0.0.1:8899
.
Mechanism
- All browser traffic first goes through SwitchyOmega, which forwards to
127.0.0.1:8899
- Configure rules on Whistle, forwarding the urls to the local development environment, all other requests which are not included will be ignored.
Configuration
- SwitchyOmega
- New Mode: Set proxy server as
127.0.0.1:8899
- New Mode: Set proxy server as
- Whistle
- Add rules as follows
1 | http://test.com:8080/api ignore://http |
- 1st line: All backend requests will be ignored.
- 2nd line: Refer to
http://test.com:8080/web/#/
, on which The browser will download theindex.html
entry file. This means that these requests will be forwarded to the local development environment. - 3rd line: All remaining requests, which may be frontend resources requests, including .js .css .vue images and node_modules files, will be forwarded to the local development environment.
File vite.config.js
- The
base
key should be set as./
, which means all requests, including frontend resources requests and backend requests, will be started from the root path. - The
proxy
key should be set already. All requests should be forwarded to the backend test environment, so no additional processing is required. - Add the following code to
vite.config.js
, if not exists:
1 | defineConfig({ |