react 开发环境配置跨域

react配置跨域问题

 准备工作：
    1、联网的电脑、react简易项目

正文

需要借助中间件 http-proxy-middleware
1、 执行命令：npm install http-proxy-middleware 或者cnpm install http-proxy-middleware 或者 yarn add http-proxy-middleware （根据电脑的报管理工具来使用）

2、在文件的根目录创建 setupProxy.js文件 敲黑板（根目录）

       const proxy = require('http-proxy-middleware')
					module.exports = function(app) {
					  app.use(
					    proxy.createProxyMiddleware('/api', {
					      target: 'http://xxxxx:12306/',
					      changeOrigin: true,
					      pathRewrite: {
					        '^/api': ''
					      }
					    })
					  )
					}

3、配置 config-overrides.js 文件
如果你的项目是 webpack 配置的会有这个文件

const {
    override,
    fixBabelImports,
    addLessLoader,
    overrideDevServer
} = require('customize-cra')

/**
 * @Descripttion: 跨域配置
 */
const devServerConfig = () => config => {
    return {
        ...config,
        compress: true,
        proxy: {
            "/api": {
                target: 'http://localhost:12306/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

module.exports = {
    devServer: overrideDevServer(
        devServerConfig()
    )
}

config-overrides也可以用来配置其他信息，如：css，UI组件库（antd）端口号等等

const {
    override,
    fixBabelImports,
    addLessLoader,
    overrideDevServer
} = require('customize-cra')

const path = require("path")
const paths = require('react-scripts/config/paths')


//配置端口号
process.env.PORT = 9527

/**
 * @Descripttion: 跨域配置
 */
const devServerConfig = () => config => {
    return {
        ...config,
        compress: true,
        proxy: {
            "/api": {
                target: 'http://localhost:12306/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}
/**
 * @Descripttion: 打包配置
 */
const addCustomize = () => config => {
    if (process.env.NODE_ENV === 'production') {
        // 关闭sourceMap
        config.devtool = false;
        paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist')
        config.output.path = path.join(path.dirname(config.output.path), 'dist')
    }
    return config;
}
// 解决（取消）生产环境的打印值，开发环境不受影响

const dropConsole = () => {
    return config => {
        if (config.optimization.minimizer) {
            config.optimization.minimizer.forEach(minimizer => {
                if (minimizer.constructor.name === 'TerserPlugin') {
                    minimizer.options.terserOptions.compress.drop_console = true
                }
            })
        }
        return config
    }
}

module.exports = {
    webpack: override(
        /**
         * @Descripttion: 按需加载antd
         * @param {type} 
         * @return: 
         */
        fixBabelImports("import", {
            libraryName: "antd",
            libraryDirectory: 'es',
            style: true,
        }),
        /**
         * @Descripttion: 配置less 
         * @modifyVars: 主题配置
         * @return: 
         */
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        }),
        addCustomize(),
        dropConsole(),
    ),
    devServer: overrideDevServer(
        devServerConfig()
    )
}

配置结束需要重启项目才会生效，当前版本热更新也不好使。

PS：小白上路，不对之处，望请雅正

------------------------------END--------------------------------------------