vue为什么要设置请求代理 • Worktile社区

不及物动词

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

Vue设置请求代理的目的主要是为了解决前后端分离开发中的跨域问题。

在前后端分离开发中，前端项目会运行在不同的域名或者端口下，而浏览器出于安全考虑，会限制跨域访问。例如，前端运行在localhost:8080，而后端接口在localhost:3000，如果直接发送请求，浏览器会拦截此次请求，认为是跨域操作，从而导致请求失败，因此需要设置请求代理来解决这个问题。

Vue中可以通过配置vue.config.js文件来实现请求代理。具体操作如下：

在项目根目录下新建一个vue.config.js文件。
在vue.config.js文件中添加一个devServer字段，用来配置开发服务器。
在devServer中添加一个proxy项，用来设置代理。

示例代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',  // 代理的目标地址
        changeOrigin: true,  // 开启代理
        pathRewrite: {
          '^/api': ''  // 重写请求路径，将'/api'替换为空字符串
        }
      }
    }
  }
}

上述代码中，'/api'指的是请求的路径前缀，'http://localhost:3000'是要代理的目标地址，changeOrigin用来开启代理，pathRewrite则是将'/api'替换为空字符串，这样在发送请求时，会自动将'/api'替换成空字符串。

通过以上设置，当前端发送请求时，会自动将请求转发到代理的目标地址，从而实现跨域访问。这样就解决了在前后端分离开发中的跨域问题，方便了开发工作的进行。

1年前 0条评论

worktile

Worktile官方账号

vue 在开发过程中设置请求代理的目的有以下几点：

解决跨域问题：在开发过程中，前端代码运行在浏览器中，而后端代码运行在服务器上，由于浏览器的安全机制，不允许跨域访问资源。为了解决跨域问题，我们通常需要通过设置请求代理来转发请求，将跨域的请求转发到后端服务器上，从而实现跨域访问。
简化开发环境：在开发过程中，前端开发人员通常会在本地启动一个开发服务器，用于开发和调试前端界面。而后端服务往往运行在不同的端口上，为了避免跨域问题，我们需要设置请求代理将请求转发到后端服务器上。通过设置请求代理，我们可以在本地开发环境中直接访问后端接口，简化了开发过程。
支持多个后端服务：有时候，我们的应用程序可能需要同时调用多个后端服务，而这些后端服务可能运行在不同的服务器上。通过设置请求代理，我们可以将不同路径的请求分发到不同的后端服务上，实现多后端服务的调用。
Mock数据：在开发过程中，后端接口可能尚未实现或者还在开发中，这时候我们可以使用 mock 数据来模拟接口返回的数据，以便前端开发人员能够继续开发和调试。通过设置请求代理，我们可以将请求转发到本地的 mock 数据服务上，获取模拟的接口返回数据。
自定义请求规则：有时候，我们可能需要对请求进行一些特殊的处理，如添加请求头、修改请求参数、拦截请求等。通过设置请求代理，我们可以自定义请求规则，对请求进行一些特殊处理，从而满足特定的业务需求。

综上所述，设置请求代理可以解决跨域问题、简化开发环境、支持多个后端服务、提供 mock 数据和自定义请求规则等功能，从而提高开发效率，方便前端开发人员进行开发和调试。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

一、什么是请求代理
在前端开发中，经常需要通过网络请求获取后端接口数据，而请求代理就是一种将前端的请求转发到后端的方法。请求代理可以帮助我们解决跨域问题，实现前端与后端的数据交互。

二、为什么要设置请求代理
设置请求代理的目的是为了解决跨域问题。

同源策略：
同源策略是浏览器的安全策略，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。同源策略要求：协议、域名、端口必须完全相同，否则就会出现跨域问题。
跨域问题：
在前后端分离开发中，通常前端会运行在一个端口上，而后端服务运行在另一个端口上，或者甚至不同的域名下。这就会导致前端请求后端接口时，出现跨域问题，请求会被浏览器阻止，从而导致无法正常获取数据。
请求代理解决跨域问题：
请求代理的原理是将前端的请求转发到后端的服务器上，由后端服务器代为请求后端接口，然后再将数据返回给前端。这样前端可以绕过浏览器的同源策略，解决跨域问题。

三、如何设置请求代理
在Vue项目中，我们可以使用webpack的代理配置来实现请求代理。以下是在Vue项目中设置请求代理的操作流程。

打开项目的配置文件vue.config.js。如果不存在该文件，则在根目录下新建一个。
在vue.config.js中添加以下代码：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                // 目标代理地址
                target: 'http://localhost:3000', 
                // 将主机标头的原点更改为目标URL
                changeOrigin: true, 
                // 重写请求路径，将/api/xxx重写为/xxx
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

以上代码中，我们将请求地址以/api开头的请求都转发到http://localhost:3000，这个地址就是我们后端的接口地址。

保存vue.config.js文件，重启项目。
在前端代码中发起请求时，只需将请求地址改为/api开头的地址即可，如：

axios.get('/api/user')
    .then(response => {
        console.log(response.data)
    })
    .catch(error => {
        console.log(error)
    })

以上代码中，我们直接使用了'/api/user'作为请求地址，实际上请求会被代理转发到http://localhost:3000/user。

通过以上操作，我们就可以在Vue项目中成功设置请求代理，解决跨域问题，实现前后端的数据交互。

1年前 0条评论