react + webpack 代理的两种方式

前言

• 无论是用react or vue 在开发期间总会面临一个相同的问题“跨域”，所以就有了通过proxy来解决跨域的问题。

1.0 通过 setupProxy 解决

• 无需引入，只需要在/src目录下新建 setupProxy.js 页面即可

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

2.0 通过 craco 解决跨域问题

• 首先是需要在项目中引入 craco
• 比较推荐使用这种方案，因为除了解决跨域之外，还能解决其他的很多问题，比如 ：@符号简写路径
• craco 引入方式在这里 如何在react内使用@符号作为src文件
• 当你在react项目中因为craco之后，在根目录下新建 craco.config.js

//craco.config.js 
const path = require('path')
module.exports = {
    //配置代理解决跨域
    devServer: {
        port: 3009,
        proxy: {
            '/api': {
                target: 'http://114.215.183.171:5002',
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/api"
                }
            },
       }
}

• 更多设置请查看react中craco配置解决跨域、打包、@、等问题
• 希望对你有所帮助 码云地址：react-question-v6