webpack代理解决跨域问题

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它可以通过配置来解决 API 跨域问题。跨域问题通常是由于浏览器的同源策略导致的，即浏览器不允许当前页面的脚本向不同源（协议、域名、端口任一不同）的服务器发送请求。 在 Webpack 中，我们可以通过配置 `devServer` 来解决跨域问题。以下是几种常见的解决方法： ### 1. 使用 `proxy` 配置代理 在 `webpack.config.js` 文件中配置 `devServer.proxy`，将特定的 API 请求代理到目标服务器。 ```javascript module.exports = { // 其他配置... devServer: { proxy: { '/api': { target: 'http://example.com', // 目标服务器 changeOrigin: true, // 是否改变原始主机头为目标 URL pathRewrite: { '^/api': '' } // 重写路径 } } } }; ``` ### 2. 使用 `before` 钩子自定义代理逻辑 如果需要更复杂的代理逻辑，可以在 `devServer.before` 钩子中自定义中间件。 ```javascript module.exports = { // 其他配置... devServer: { before: function(app, server, compiler) { app.get('/api/*', (req, res) => { const url = `http://example.com${req.originalUrl}`; fetch(url) .then(response => response.json()) .then(data => res.json(data)) .catch(err => res.status(500).json({ error: 'Proxy error' })); }); } } }; ``` ### 3. 使用 `http-proxy-middleware` 中间件 `http-proxy-middleware` 是一个常用的中间件，可以更方便地配置代理。 首先，安装 `http-proxy-middleware`： ```bash npm install --save-dev http-proxy-middleware ``` 然后，在 `webpack.config.js` 中配置： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = { // 其他配置... devServer: { before: function(app, server, compiler) { app.use( '/api', createProxyMiddleware({ target: 'http://example.com', changeOrigin: true, pathRewrite: { '^/api': '' } }) ); } } }; ``` 通过以上配置，Webpack 可以在开发环境下解决 API 跨域问题。