「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

前言

后端框架根据环境变量可以实现自动切换数据库连接。前端框架当然也可以读取相关环境变量用来切换自适应的后端接口域名，今天我在数据库加了很多的模拟数据，然后配置跨域设置看看真实线上的效果。

什么是跨域

现在前后端分离的项目十分流行，这里稍微用自己的话总结一下什么的是跨域。之前做的前后端不分离的时代前后端代码在同一台服务器上，那时候还有没有前端脚手架，前端的代码都在后端框架里面。所以前端的请求全部都是请求自身框架的接口，通俗来讲也就是前端的静态文件的来源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就是使用中间件的意思

这样我们把前后端的代码传到线上就可以看到。前端能直接访问到后端接口的数据了：

总结：

加了很多内容，直到最后发现样式还是有点问题，右边的数据变多了之后，把左边固定宽的内容压缩了，下一篇文章再进行调整。