Webpack-dev-server 代理配置及跨域解决方案
在前端开发过程中，经常会遇到前后端分离的场景，需要将前端应用与后端 API 接口进行交互。为了解决开发环境下的跨域问题，可以使用 Webpack-dev-server 提供的代理功能。
代理配置
在 webpack.config.js 文件中，通过 devServer.proxy 选项可以配置代理规则。以下是一些常用的代理场景：
场景一：代理所有 /api 开头的请求
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
说明：
/api：表示需要代理的请求路径前缀。http://localhost:3000：表示目标服务器地址，所有匹配/api前缀的请求都会被代理到该地址。
通过以上配置，所有以 /api 开头的请求，如 /api/users、/api/posts 等，都会被代理到 http://localhost:3000 服务器。
优势
- 简化开发流程：无需额外配置 Nginx 或修改 hosts 文件，即可解决跨域问题。
- 提高开发效率：代理配置简单易用，方便开发者进行调试。
文件大小：59.41KB
评论区