环境变量与跨域_环境变量是用来解决跨域的吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_47745553/article/details/128960832

环境变量

环境变量获取 process.env

环境变量文件中内置了BASE_URL和NODE_EVN这两个环境变量

环境变量文件中变量命名必须要以VUE_APP开头，否则在客服端代码（src文件）是读取不到的

当运行npm run dev 时会自动读取.ev.development环境变量（因为 vue_cli_service serve）

当运行npm run build:prod时会自动读取.ev.production环境变量（因为 vue_cli_service build）

可以通过 --mode文件后缀名去指定读取环境变量文件

区分不同环境接口的方式通过 pack.json中的命令和环境变量文件配合起来区分

正常VUE_APP开头的变量赋值给他一个我们的基地址，我们如果封装请求的话，统一携带请求头可以写成baseURL: process.env.VUE_APP_BASE_API。

开发环境中的VUE_APP_BASE_API = "/api"

那我们的baseURL："/api"

当我们发送请求的时候，会产生跨域问题，协议，ip地址，端口号有一个不一致就会产生跨域的问题报错

解决跨域的问题：

1.可以设置cors协议，后台设置请求口允许客户端请求（access-control-allow-origin）

2.通过代理，浏览器和服务器通信的时候会产生跨域得问题，服务器和服务器之间不会

代理：在vue.config.js文件下得devServer配置

devServer: {
proxy: {
// 可以配置多个代理
'/api': {
    target: 'http://123.57.109.30:3000'
    pathRewrite: { '^/api': '' }
     配置完 pathRewrite之后，替换/api为空字符串
}
},

proxy会拦截我们得请求替换成自己地址