vue本地运行开发，为什么要配置changeOrigin: true

SailingCoder2024-01-15 17:33

changeOrigin: true是在配置反向代理时常见的一个选项，通常用于解决跨域请求的问题。Vue本地运行时，可能会涉及到前端应用与后端服务不在同一个域的情况，这就会触发浏览器的同源策略，阻止跨域请求。

使用Vue CLI（或其他类似的工具）在本地运行时，可以通过配置代理来解决跨域问题。changeOrigin: true是其中的一个配置选项，它的作用是将请求的头部的Host字段改为被代理服务器的Host字段。

举例来说，假设前端应用运行在http://localhost:8080，而后端服务运行在http://localhost:3000。如果不启用changeOrigin: true，那么通过代理发往后端的请求头中的Host字段仍然是localhost:8080，而不是localhost:3000。有些后端服务器会根据Host字段进行处理，如果不匹配，就可能拒绝服务。

启用changeOrigin: true会将请求头中的Host字段更改为被代理服务器的Host，确保请求能够正确地被后端服务器处理。

示例配置：

javascript 复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

上述配置表示，所有以/api开头的请求会被代理到http://localhost:3000，并且会修改请求头中的Host字段。这样，你就可以在本地开发时解决跨域问题。