为什么vue设置代理地址 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue设置代理地址的目的是为了解决前端开发中的跨域问题。

在前端开发中，浏览器有同源策略的限制，即只允许与同一域名、端口、协议的接口进行交互。如果前端与后端接口的域名、端口或协议不一致，就会产生跨域问题，导致前端无法正常获取后端数据。

为了解决这个问题，可以通过设置代理地址来实现。Vue提供了一个vue.config.js配置文件，可以通过配置该文件来设置代理地址。

具体步骤如下：

在Vue项目的根目录下创建vue.config.js文件。
在vue.config.js文件中添加以下内容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',  // 将接口的根路径代理到指定的地址
        changeOrigin: true,  // 改变请求头中的Origin为目标服务器地址
        pathRewrite: {
          '^/api': ''  // 将接口路径中的/api前缀去掉
        }
      }
    }
  }
}

上述代码的意思是将以/api开头的请求都代理到http://localhost:8080这个地址上，并将请求头中的Origin更改为目标服务器地址。

重启Vue项目。

通过以上步骤，前端项目将会在开发环境下使用代理地址进行接口请求，从而解决跨域问题。当项目打包部署到生产环境时，代理将不再起作用，因此部署到生产环境时需要确保接口请求的域名、端口和协议与前端项目一致。

总结来说，Vue设置代理地址是为了解决前端开发中的跨域问题，通过配置vue.config.js文件，将接口请求的根路径代理到目标服务器地址。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue设置代理地址是为了解决前端开发中的跨域问题。具体来说，前端开发中，经常会遇到以下情况：

前端和后端服务部署在不同的域名下：由于同源策略的限制，浏览器默认不允许跨域访问，即前端无法直接请求后端接口。此时，需要使用代理来转发请求，将前端请求发送到代理服务器，由代理服务器再转发到后端服务，最终返回结果给前端。
开发环境和生产环境的域名不同：在开发环境中，前端通常会使用一个单独的开发服务器，而不是直接访问生产环境的后端服务。此时，需要设置代理将请求转发到开发服务器上，以便进行开发和调试。
接口需要鉴权：有些接口需要进行身份验证才能访问，需要在代理服务器上添加相关的认证逻辑，以实现接口的安全访问。
解决浏览器的同源策略限制：浏览器的安全策略规定，JavaScript只能访问同源的资源，即协议、域名和端口都相同。而代理可以将前端的请求发送到同源的地址上，绕过浏览器的同源策略限制，实现跨域请求。
优化前端开发体验：通过设置代理地址，可以在不修改前端代码的情况下，快速地切换到不同的后端服务进行开发和测试，提高开发效率。

总结起来，Vue设置代理地址可以解决跨域问题，并且能够提高前端开发体验和开发效率，确保前后端的正常通信。

1年前 0条评论

worktile

Worktile官方账号

Vue中设置代理地址是为了解决开发环境下的跨域问题。跨域是指浏览器在发起 AJAX 请求时，域名、端口、协议三者有一个不同就会被认为是跨域，浏览器会限制跨域访问。

开发环境下，我们通常会使用npm run serve命令启动Vue项目，这时Vue会自动在本地起一个开发服务器，端口号一般是8080。

假设我们的后端API接口是http://localhost:3000/api，而前端项目是运行在http://localhost:8080处。此时发起请求就会跨域，为了解决这个问题，我们可以使用代理地址。

接下来，我会具体介绍Vue中设置代理地址的方法和操作流程。

一、使用vue.config.js文件进行代理设置

在Vue项目的根目录下，找到并打开vue.config.js文件。
- 如果没有找到，可以手动在项目根目录下新建一个vue.config.js文件。
在vue.config.js文件里，添加以下代码：

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

target是要代理的目标地址，即后端API接口的地址。
changeOrigin设置为true表示开启代理。
pathRewrite是路径重写，这里将/api替换为空字符串，目的是去掉/api前缀。

保存文件，重新启动Vue项目(npm run serve)。
在前端代码中使用代理地址发起请求。
– 例如，原本请求的地址是/api/user，经过代理设置后，实际请求的地址会变成http://localhost:3000/user。

二、使用vue.config.js文件进行多个代理设置

在vue.config.js文件里，添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api1': { // 第一个代理地址
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': ''
        }
      },
      '/api2': { // 第二个代理地址
        target: 'http://localhost:4000',
        changeOrigin: true,
        pathRewrite: {
          '^/api2': ''
        }
      }
    }
  }
}

保存文件，重新启动Vue项目。
在前端代码中使用代理地址发起请求。
- 例如，如果要请求/api1/user，实际请求的地址会变成http://localhost:3000/user；
- 如果要请求/api2/product，实际请求的地址会变成http://localhost:4000/product。

三、使用vue.config.js文件进行WebSocket代理设置

module.exports = {
  devServer: {
    proxy: {
      '/ws': { // WebSocket代理地址
        target: 'ws://localhost:4000',
        ws: true,
      }
    }
  }
}

使用WebSocket时，需要设置ws为true，表示开启WebSocket代理。

总结：

在Vue项目中，通过配置vue.config.js文件，可以设置代理地址来解决开发环境下的跨域问题。
代理地址的设置可以单个或者多个，可根据需要来配置。
在前端代码中，使用代理地址发起请求时，会经过代理设置，实际请求的地址会变成代理的目标地址。
WebSocket代理设置同样适用于vue.config.js文件。

1年前 0条评论