美文网首页React
webpack 代理跨域

webpack 代理跨域

作者: CondorHero | 来源:发表于2019-07-30 12:05 被阅读1次

    当我们做项目时,后台开发接口给我们,我们访问一般是跨域访问,那么如何使用 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

    成功跨域。

    相关文章

      网友评论

        本文标题:webpack 代理跨域

        本文链接:https://www.haomeiwen.com/subject/uwzbrctx.html