Zan Proxy：解决前端跨域、服务端预览本地文件、

Zan Proxy 官网链接 https://youzan.github.io/zan-proxy/
Mac 需要安装证书 https://youzan.github.io/zan-proxy/book/quick-start/cert.html

一、Zan Proxy 是什么？

官方介绍：Zan Proxy 是一个用Node.js编写的HTTP代理服务器，可用于修改请求地址和模拟响应数据。

可以通过这个代理、转发线上**获取资源的请求**，拿取本地**实时的静态代码**【css,js,html】
这样就不用每次本地调试完，打包、部署服务器查看了。本地就可以直接预览部署之后的效果。
解决跨域的问题。

二、安装Zan Proxy

方式一【推荐】、也可以直接下载客户端：传送门
方式二、可以通过官方的 npm 或是 yarn 来安装。

通过Yarn安装

yarn global add zan-proxy

通过NPM安装

npm i -g zan-proxy

安装检验

zan-proxy --version

三、安装 Chrome 插件 Proxy SwitchyOmega

一、官方下载地址： https://proxy-switchyomega.com/download/

一、github下载：https://github.com/FelisCatus/SwitchyOmega/releases

四、配置 Zan Proxy

第一步新建
第二步启用转发
第三步前往编辑新的转发规则集

第四步新增

第五步创建规则集

第六步新增转发变量和新增规则

第七步通过线上地址查看静态资源的url

第八步、输入对应的url特征：
例如：
1.

xxxx.xxxx.cn/mall-cloud/xxx/(js|css)/(.+).(.+).(js|css)

${ 转发变量名 }/$1/$2.$1

xxxx.xxxx.cn/mall-cloud/xxx/(js|css)/(.+).(js|css)

${ss}/$1/$2.$1

第九步、选择使用的规则集

第十步、打开服务地址
使用插件选择 proxy 即可

proxy 配置：

五（可选）、本地项目启动 npm run watch

增加文件：

watch.js

const ora = require('ora');
const fs = require('fs-extra');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.watch.conf');
const spinner = ora('building for watch...');
spinner.start();process.env.NODE_ENV = 'development';fs.removeSync(config.build.pages);
fs.removeSync(config.build.output);const compiler = webpack(webpackConfig);
compiler.watch({aggregateTimeout: 300,poll: undefined
}, (err, stats) => { // Stats Objectif (err) throw err;process.stdout.write(`${stats.toString({colors: true,modules: false,children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.chunks: false,chunkModules: false})}\n\n`);if (stats.hasErrors()) {// console.log(stats.toJson());console.log(chalk.red('  Build failed with errors.\n'));process.exit(1);}
});

webpack.watch.conf.js

const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const {getAppName} = require('../../utils');process.env.NODE_ENV = 'production';const webpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({sourceMap: false,extract: true})},devtool: false,output: {path: config.build.output,publicPath: `https://file.yzcdn.cn/mall-cloud/${getAppName()}/`,filename: 'js/[name].js',chunkFilename: 'js/[id].js'},plugins: [// new webpack.ProgressPlugin(),new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),// new UglifyJsPlugin({//   uglifyOptions: {//     compress: {//       warnings: false//     }//   },//   sourceMap: false,//   parallel: true// }),// extract css into its own filenew ExtractTextPlugin({filename: 'css/[name].css',allChunks: true,}),// Compress extracted CSS. We are using this plugin so that possible// duplicated CSS from different components can be deduped.new OptimizeCSSPlugin({cssProcessorOptions: { safe: true }}),// keep module.id stable when vendor modules does not changenew webpack.HashedModuleIdsPlugin(),// enable scope hoistingnew webpack.optimize.ModuleConcatenationPlugin(),// split vendor js into its own filenew webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks (module) {// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0);}}),].concat(utils.htmlPlugin())
});// if (config.build.bundleAnalyzerReport) {//   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//   webpackConfig.plugins.push(new BundleAnalyzerPlugin());
// }module.exports = webpackConfig;

package.json

"scripts": {"dev": "node webpack/dev.js","watch": "node webpack/watch.js","build": "node webpack/build.js"},

Zan Proxy：解决前端跨域、服务端预览本地文件、相关推荐

解决前端跨域的几种方法
解决前端跨域的几种方法了解跨域出现的原因解决跨域的几种方法想要解决跨域先要知道为什么会出现跨域跨域:指的是浏览器不能执行其他网站的脚本它是由浏览器的同源策略造成的是浏览器对javascr ...
Nginx 代理解决前端跨域问题
目录一.什么是 nginx 二.nginx 的用途三.代理 1.正向代理 2.反向代理四.nginx.conf 配置文件的基本结构五.nginx 的内置变量六.nginx 解决跨域的原理七 ...
使用webpack-dev-server设置反向代理解决前端跨域问题
使用webpack-dev-server设置反向代理解决前端跨域问题参考文章: (1)使用webpack-dev-server设置反向代理解决前端跨域问题 (2)https://www.cnblog ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
如何用Nginx解决前端跨域问题？
如何用Nginx解决前端跨域问题? 参考文章: (1)如何用Nginx解决前端跨域问题? (2)https://www.cnblogs.com/lovesong/p/10269793.html 备忘一 ...
ashx获取input file 文件_前端战五渣学前端——FileReader预览本地文件
距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒.可能是天气热了吧,有点点躁动.上周看了<哪吒--魔童降世>还不错,还看了新出的&l ...
前端交互之“解决前端跨域的三种方法”
1.什么是前端跨域? 跨域是浏览器为了安全而做出的限制策略:浏览器请求必须遵从同源测试: http://www.bilibili.com:8080:/anime/?key=calue路径键值对同协 ...
前端跨域请求get_解决前端跨域请求的几种方式
利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问 ...
使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）
1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到 ...