Webpack Dev Server代理配置遇CORS问题，求排查原因

核心问题 #

你配置了webpack devServer的代理，但前端代码直接请求了https://www.youtube.com的完整地址，没走本地代理服务器，浏览器直接向youtube发起跨域请求，而youtube服务器没有允许http://localhost:9000的跨域访问，所以触发CORS错误。

解决步骤 #

方法一：使用相对路径请求 #

把前端的fetch请求改成相对路径，让请求先发给本地devServer，再由代理转发到youtube：

fetch("/watch?v=fJ9rUzIMcZQ");

此时请求会发送到http://localhost:9000/watch?v=fJ9rUzIMcZQ，devServer会自动将其转发到配置的https://www.youtube.com目标地址。

方法二：配置更明确的代理规则（可选） #

如果需要区分多个代理目标，可以细化proxy配置，避免路径冲突：

devServer: {
  port: 9000,
  hot: true,
  proxy: {
    '/youtube': {
      target: 'https://www.youtube.com',
      pathRewrite: {'^/youtube': ''}, // 去掉路径中的/youtube前缀
      changeOrigin: true // 修改请求头中的Origin为目标域名，避免被目标服务器拦截
    }
  }
}

对应前端请求改为：

fetch("/youtube/watch?v=fJ9rUzIMcZQ");

补充说明 #

CORS是浏览器的安全机制，当前端页面和请求目标域名不同时，浏览器会检查目标服务器返回的Access-Control-Allow-Origin头是否包含当前页面的Origin。通过devServer代理时，请求是从本地服务器（和前端同源）发送到目标服务器，浏览器只会校验前端和本地服务器的同源性，不会触发跨域检查。

内容的提问来源于stack exchange，提问作者Eugenie