如何设置Vue项目中的代理proxy以实现跨域访问？

本文共计792个文字，预计阅读时间需要4分钟。

在Vue单页应用项目开发中，避免不了需要请求后端。这时，常会遇到跨域问题。以下有两种常用解决方案：

1. 后端设置允许跨域访问

2.前端通过代理访问后端

下面我们来说说如何配置Vue-Cli：

1. 后端设置允许跨域访问：

在后端代码中，根据使用的框架，设置跨域访问的响应头。例如，在Express中，可以使用`cors`中间件。

2. 前端通过代理访问后端： 在Vue项目中，可以通过配置`vue.config.js`文件来实现代理。

javascript module.exports={ devServer: { proxy: { '/api': { target: 'http://your-backend-url.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }

在上述配置中，所有以`/api`开头的请求都会被代理到指定的后端URL。`changeOrigin`设置为`true`表示代理服务器会改变请求的域名，`pathRewrite`用于重写路径。

在vue单页应用项目开发时，避免不了要请求后端，这时通常就会出现跨域问题。