webpack 代理跨域

当我们做项目时，后台开发接口给我们，我们访问一般是跨域访问，那么如何使用 webpack 进行跨域访问，来完成前端测试的接口问题。

我们使用 node 开发后台接口，来模拟这个问题的答案。

const express = require("express");

const app = express();

app.get("/proxy",function(err,res){
    res.json({"name":"Condor Hero"});
});

app.listen(500);

console.log("500 端口已经成功监听！");

上面的代码使用 node 和 express 配合，来模拟了 http://127.0.0.1:500/proxy 这个接口。

访问结果：

现在的问题是 8080 得不到 500 的数据。要设置代理跨域，改变前端的webpack.config.js：

//webpack.config.js
// var path = require("path");
// 使用webpack-dev-server 就不需要path

module.exports = {
    mode:"development",
    entry:"./App/main.js",
    output:{
        // webpack要求的输出路径
        // path:path.resolve(__dirname,"dist"),
        // webpack-dev-server的虚拟输出路径虚拟生成，不损坏硬盘，效率很高，热更新
        publicPath:"virtual",
        filename:"all.js"
    },
    // webpack-dev-server 动态实时更新不在需要watch:true;
    // watch:true,
    module:{
        rules:[
            {
                test:/\.less$/,
                  use: [
                    {
                        loader: "style-loader"  // creates style nodes from JS strings
                    }, 
                    {
                        loader: "css-loader"        // translates CSS into CommonJS
                    }, 
                    {
                        loader: "less-loader"   // compiles Less to CSS
                    }
                    //上面的另一种写法
                    //use: ['style-loader', 'css-loader','less-loader']
                ]
            },
            {
                test: /\.m?js$/,//匹配.mjs和.js结束的文件
                exclude: /(node_modules|bower_components)/,
                use: {
                loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env','@babel/preset-react'],
                        // @babel/plugin-proposal-object-rest-spread翻译高级ES的...
                        // @babel/plugin-transform-runtime翻译高级ES的带星函数即Generator
                        plugins: ['@babel/plugin-proposal-object-rest-spread','@babel/plugin-transform-runtime']
                    }
                }
            }
        ]
    },
    resolve: {
        //自动解析确定的扩展。默认值为：
        extensions: [".js", ".json", ".jsx", ".css"],
        //解析目录时要使用的文件名。默认：
        mainFiles: ["index","Index"]
    },
    // 代理跨域
    devServer: {
        // 此处可以自定义访问端口号
        port : 8080,
        proxy: {
            '/api': {
                target: 'http://localhost:500',
                pathRewrite: {'^/api' : ''}
            }
        }
    }
}

webpack 官网配置地址 ：https://webpack.js.org/configuration/dev-server/#devserverproxy

此时任何 500 的端口，都会被偷到 8080 端口来，但是要补一个/api：

http://127.0.0.1:500/proxy

现在：

http://127.0.0.1:8080/api/proxy

成功跨域。