vue.config.js devServer中changeOrigin的作用

问题

vue开发时，为了解决前端跨域问题，通常在vue.config.js配置 devServer proxy

devServer: {
    proxy:{
      '/api': {
        target: 'http://b.com',
        changeOrigin: false
      },
    },
}

官方文档http-proxy options对changeOrigin的解释

option.changeOrigin: true/false, Default: false - changes the origin
of the host header to the target URL

比如，浏览器地址栏是http://a.com/some/path，那么/api开头的请求会被代理到http://b.com，

• 未配置changeOrigin（默认为false）
  • 那么b.com收到的http 请求头中origin是http://a.com，也就是说默认的，与地址栏中的一样；
• changeOrigin：true
  • b.com收到的请求头中origin是http://b.com

origin vs host

• origin通常用来限制跨域，相应的服务器端需要响应Access-Control-Allow-Origin:“some.domain.com”，浏览器据此判断是否允许跨域；some.domain.com可以是通配符*，表示允许所有域名跨域；
• host用来实现基于域名的虚拟主机，可参考Name-based virtual hosts

总结

ajax跨域请求时，浏览器知道请求是跨域，给请求头中添加origin，服务器端收到后，可返回Access-Control-Allow-Origin，浏览器据此判定是否允许跨域；当然了还有Access-Control-Allow-Credentials、Access-Control-Allow-Headers、Access-Control-Allow-Methods；
使用代理后，ajax请求是同域请求，浏览器不会在请求头中添加origin，changeOrigin false或者true，只能影响接收者收到的origin，不能影响是否跨域，除非服务器端做了限制。也就是说，只要配置了devServer，changeOrigin 配置仅影响请求头中的origin；