从零开始摸索VUE,配合Golang搭建导航网站十四.Vue cli env环境变量 ,后端跨域设置
前言
后端框架根据环境变量可以实现自动切换数据库连接。前端框架当然也可以读取相关环境变量用来切换自适应的后端接口域名,今天我在数据库加了很多的模拟数据,然后配置跨域设置看看真实线上的效果。
什么是跨域
现在前后端分离的项目十分流行,这里稍微用自己的话总结一下什么的是跨域。之前做的前后端不分离的时代前后端代码在同一台服务器上,那时候还有没有前端脚手架,前端的代码都在后端框架里面。所以前端的请求全部都是请求自身框架的接口,通俗来讲也就是前端的静态文件的来源url和接口请求的来源url都是一样的,都来自同一个域名,在那个时候就不会出现什么跨域的问题,但是现在现在前后端分离就会出现跨域,就是前端javascript需要请求来自不同域名的接口或资源。特别是现在的微服务架构,一个后端系统通常会拆成很多部分,每个部分解析成很多域名,这么多域名会给很多前端项目使用。这样会导致网页十分不安全,有些请求的资源突然变动会导致网页会显示混乱,或者自己的服务器的资源会被其他人胡乱使用,所以浏览器会为了避免出现莫名其妙的问题默认不允许这样的情况发生。后端也要在回应前端调用的时候告诉通过响应的header头告诉浏览器要允许跨域访问("Access-Control-Allow-Origin", "*"
)。
新建环境变量文件
在项目根目录新建两个文件名为:.env
和.env.master
内容分别为:
ENV = 'production'
VUE_APP_BASE_API = 'http://localhost:8080'
ENV = 'master'
VUE_APP_BASE_API = 'http://www.*****.com'
折腾了半天,发现在本地环境下请求后端接口会使用vue.config.js
里面代理设置,然而在线上就不会使用这里的代理设置。所以现在需要改main.js里面的内容:
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
if (process.env.ENV == 'production') {
axios.defaults.baseURL = '/api' //关键代码
} else {
axios.defaults.baseURL = process.env.VUE_APP_BASE_API //关键代码
}
axios.defaults.headers.post['Content-Type'] = 'application/json';
new Vue({
render: h => h(App),
}).$mount('#app')
读取ENV文件的环境变量来更换 axios.defaults.baseURL
,但是仅仅更换这里还是不够,还需要做后端设置
后端跨域设置
后端就比较简单,只需要添加Gin中间件,前提是,接口是能够需要在公网上访问的:
那么现在在项目根目录新建一个middleware
目录,在该目录下新建middleware.go
文件输入以下内容:
package middleware
import (
"net/http"
"github.com/gin-gonic/gin"
)
func Cors() gin.HandlerFunc {
return func(context *gin.Context) {
method := context.Request.Method
context.Header("Access-Control-Allow-Origin", "*")
context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token")
context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
context.Header("Access-Control-Allow-Credentials", "true")
if method == "OPTIONS" {
context.AbortWithStatus(http.StatusNoContent)
}
context.Next()
}
}
然后在项目根目录main.go
文件引入该文件
在main
方法r := gin.Default()
下面一个加载这个中间件:
r.Use(middleware.Cors())
注意在Gin框架下Use就是使用中间件的意思
这样我们把前后端的代码传到线上就可以看到。前端能直接访问到后端接口的数据了:
总结:
加了很多内容,直到最后发现样式还是有点问题,右边的数据变多了之后,把左边固定宽的内容压缩了,下一篇文章再进行调整。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhbebjec
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01