本文共 1224 字，大约阅读时间需要 4 分钟。
在某些项目中，当我们需要在本地开发时，可能会遇到跨域问题。此时，我们可以通过配置 webpack-dev-server 来解决这个问题。
修改 package.json 文件
打开你的项目根目录下的package.json 文件，找到 scripts 部分。将 dev 脚本中的 webpack-dev-server 参数添加 --host 0.0.0.0，这样可以允许服务器在所有网络接口上监听。{ "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", "start": "npm run dev", "build": "node build/build.js" }}配置跨域
如果你在开发过程中遇到跨域问题，可以通过webpack-dev-server 的 proxy 功能来配置。这样可以避免浏览器的同源策略限制。// 示例配置{ "paths": { "static": "static", "assets": "assets" }, "publicPath": "/", "proxyTable": { "/api": { "target": "http://192.168.4.123", "secure": false, "changeOrigin": true, "pathRewrite": { "^/api": "" } } }} target：目标地址，这里是接口的域名。secure：如果接口是 HTTPS，建议设置为 true。changeOrigin：如果接口跨域，建议设置为 true。pathRewrite：如果需要修改路径，可以在前面加上通配符。重新构建项目
在修改完package.json 后，运行以下命令重新构建项目：npm rebuild
这样可以确保你的 webpack-dev-server 配置生效。如果你在构建过程中遇到问题，可能需要检查 build/webpack.dev.conf.js 文件是否正确配置。
测试配置
在修改完成后，运行npm start 启动项目，检查是否能够正常访问跨域接口。如果仍然出现错误，请仔细检查 proxyTable 配置是否正确，尤其是 pathRewrite 的设置是否正确。通过以上方法，你应该能够顺利解决跨域问题并正常使用 webpack-dev-server。如果有任何问题，建议参考 webpack-dev-server 的官方文档或相关技术博客获取更多帮助。
转载地址：http://nvnt.baihongyu.com/