前端面试题189（详解vue中proxy）

在Vue.js应用开发中，proxy 主要指的是Vue CLI在现代浏览器中为开发环境设置的Webpack devServer的代理功能，而不是Vue本身的一个核心特性。这一配置帮助开发者解决前端应用在开发过程中遇到的跨域问题。当你的Vue应用需要从运行在不同端口或域名的后端API获取数据时，由于浏览器的同源策略限制，可能会遇到跨域访问的错误。为了解决这个问题，Vue CLI提供了代理服务器的功能，它可以将前端应用的API请求转发到实际的后端服务器上，从而绕过浏览器的跨域限制。

如何配置

在Vue项目中，你通常会在vue.config.js文件中配置devServer.proxy来实现这个功能。如果该文件不存在，你可以手动创建它。下面是一个简单的配置示例：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端API的实际地址
        changeOrigin: true, // 是否改变源，设置为true可以让服务器接收到的请求头中的Host为target的值
        pathRewrite: { '^/api': '' } // 路径重写，去除请求路径中的'/api'部分，以便后端可以正确解析
      }
    }
  }
};

在这个例子中，所有以/api开头的请求都会被代理到http://localhost:3000上。比如，当你在Vue应用中发起一个到/api/data的请求，实际上这个请求会被转发到http://localhost:3000/data。

注意事项

• proxy配置仅在开发环境下生效，生产环境部署时需要确保后端服务已经正确设置了CORS（跨源资源共享）策略，或者使用nginx等反向代理服务器进行配置。
• changeOrigin设置为true意味着代理会修改请求头中的Origin，使其看起来请求是直接来自目标服务器，这对于那些检查请求来源的API服务非常重要。
• pathRewrite可以用来简化请求路径，或者适应后端API的路径结构。

通过这种方式，Vue CLI的proxy功能为开发者提供了一个便捷的解决方案，使得在本地开发环境中能够无缝对接后端API，而无需担心跨域问题。