100字范文 > vue-cli解决开发环境的跨域问题-配置跨域代理

vue-cli解决开发环境的跨域问题-配置跨域代理

时间：2022-07-12 20:25:43

Vue-Cli配置跨域代理

目标: 通过配置vue-cli的代理解决跨域访问的问题

为什么会出现跨域？

当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为.

怎么解决这种跨域？

请注意，我们所遇到的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境的

解决开发环境的跨域问题

开发环境的跨域

开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务**,可以通过这个服务帮我们代理请求,解决跨域问题

这就是vue-cli配置webpack的反向代理

采用vue-cli的代理配置

vue-cli的配置文件即**vue.config.js**,这里有我们需要的代理选项

module.exports = {devServer: {// 代理配置proxy: {// 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制// localhost:8888/api/abc => 代理给另一个服务器// 本地的前端 =》本地的后端 =》代理我们向另一个服务器发请求（行得通）// 本地的前端 =》另外一个服务器发请求（跨域行不通）'/api': {target: '', // 我们要代理的地址changeOrigin: true, // 是否跨域需要设置此值为true 才可以让本地服务代理我们发出请求// 路径重写pathRewrite: {// 重新路由 localhost:8888/api/login => /api/login'^/api': '' // 假设我们想把 localhost:8888/api/login 变成/login 就需要这么做 }},}}}

以上就是我们在vue-cli项目中配置的代理设置

接下来,我们在代码中将要代理的后端地址变成后端接口地址http://ihrm-

// 代理跨域的配置proxy: {// 当我们的本地的请求有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求'/api': {target: 'http://ihrm-/', // 跨域请求的地址changeOrigin: true // 只有这个值为true的情况下才表示开启跨域}}

本节注意：我们并没有进行pathRewrite,因为后端接口就是ihrm-/api这种格式,所以不需要重写

vue.config.js的改动如果要生效,需要进行重启服务

同时，还需要注意的是，我们同时需要注释掉 mock的加载，因为mock-server会导致代理服务的异常

// before: require('./mock/mock-server.js'), // 注释mock-server加载

生产环境的跨域

生产环境表示我们已经开发完成项目，将项目部署到了服务器上,这时已经没有了vue-cli脚手架的辅助了，我们只是把打包好的html+js+css交付运维人员，放到Nginx服务器而已,所以此时需要借助Nginx**的反向代理来进行

server{# 监听9099端口listen 9099;# 本地的域名是localhostserver_name localhost;#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址location ^~ /api {proxy_pass ;} }

注意:这里的操作一般由运维人员完成,需要前端进行操作,这里我们进行一下简单了解

更多正向代理和反向代理知识,请阅读这篇文章Nginx反向代理

提交代码

注意：我们并没有进行pathRewrite,因为后端接口就是ihrm-/api这种格式,所以不需要重写。