webpack处理跨域问题

最新推荐文章于 2025-03-13 13:42:48 发布

rookieLink

最新推荐文章于 2025-03-13 13:42:48 发布

阅读量433

点赞数

分类专栏： webpack系列文章标签： webpack跨域 webpack

本文链接：https://blog.youkuaiyun.com/zf2014122891/article/details/104563247

版权

webpack系列专栏收录该内容

37 篇文章

订阅专栏

本文介绍了webpack处理跨域问题的三种方法：1) 配置代理proxy；2) 使用before钩子；3) 在服务端启动webpack并使用服务器端口。通过这些方式，可以有效地解决开发过程中遇到的跨域限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack跨域问题

webpack自己带了express框架

1、配置代理proxy

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');

module.exports = {
    // 多入口
    mode: 'development',
    entry: {
        home: './src/index.js',
    },
    // devServer: {
    //     publicPath: '',
    //     proxy: {
    //         '/api/**': 'http://localhost:3000', // 配置了一个代理
    //         secure: false
    //     },
    // },
    devServer: {
         proxy: {
         // 凡是以/api开头的请求，都转化请求路径
             '/api': {
                 target: 'http://localhost:4000',
                 pathRewrite: {'/api':''},
                 changeOrigin: true,
                 secure: false
             }
         }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        // 这里的 name代表 home， other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
            chunks: [
                "home",
            ],
        }),
    ]
};

2、使用before

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');

module.exports = {
    // 多入口
    mode: 'development',
    entry: {
        home: './src/index.js',
    },
    devServer: {
        before(app){
            app.get('/user', (req, res) => {
                res.json({name: 'zhangfeng'});
            });
        },
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        // 这里的 name代表 home， other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
            chunks: [
                "home",
            ],
        }),
    ]
};

3、通过在服务端进行启动webpack 端口就用服务器端口

express使用webpack-dev-middleware中间件

let express = require('express');

let app = express();

let webpack = require('webpack');
// 中间件
let middle = require('webpack-dev-middleware');
let config = require('./webpack.config');
let compiler = webpack(config);

app.use(middle(compiler));

console.log(1111111111111);

app.get('/user', (req, res) => {
    res.json({name: 'zhangfeng'});
});

app.get("*", function(request, response) {
    response.json({name: 'hahahahha'});
});

app.listen(4000);