Golang Gin+Vue+Nginx & 前后端分离 & 跨域请求及解决办法

·  阅读 869
Golang Gin+Vue+Nginx & 前后端分离 & 跨域请求及解决办法

一、Vue前端框架的使用(goland)

1. 使用的是Goland的插件进行安装node.js和vue.js(网上也有直接安装的)

  • 在Goland中 File -> Settings -> Plugins 搜索并安装Node.jsVue.js,如图

Goland Vue插件.png

  • 成功之后,可以在终端使用node -v查看node.js版本号

node -v.png

  • 安装cnpm代替npm(国内的源)

npm install cnpm -g --registry=https://registry.npm.taobao.org

  • 安装vue脚手架vue-cli,并使用vue -V查看版本号

cnpm install -g vue-cli

Vue -V.png

  • 任意选择一个目录,初始化vue项目

vue init webpack my-project

会出现一些选项,一直回车选择默认的

vue init.png

生成目录结构

vue目录结构.png

  • 初始化完成,可以在项目下运行cnpm run dev

npm run dev.png

二、前后端分离

1.前端

1.1 axios异步通信

  • cnpm install axios安装axios

安装axios.png

  • 配置全局axios

axios全局配置.png

  • 使用axios进行GET请求

axios使用.png

  • 运行Vue,但是现在还没有启动后端,页面会报错net::ERR_CONNECTION_REFUSED

cnpm run dev

运行vue.png

2.后端

2.1. 启动后端

package main

import (
   "github.com/gin-gonic/gin"
   "net/http"
)

func main() {
   // 创建一个默认的路由引擎
   r := gin.Default()
   // GET:请求方式;/hello:请求的路径
   // 当客户端以GET方法请求/hello路径时,会执行后面的匿名函数
   r.GET("/hello", func(c *gin.Context) {
      // c.JSON:返回JSON格式的数据
      c.JSON(200, gin.H{
         "message": "Hello world!",
      })
   })
   r.Run(":8001")
}
复制代码

运行

go run main.go
复制代码

2.2. 跨域请求问题

按上述操作使用axios会发生跨域请求的问题,具体原因自行百度

跨域请求问题.png

2.3. 解决办法一(gin使用允许跨域请求中间件)

package main

import (
   "github.com/gin-gonic/gin"
   "net/http"
)

func main() {
   // 创建一个默认的路由引擎
   r := gin.Default()
   // 使用允许跨域请求中间件
   r.Use(Cors())
   // GET:请求方式;/hello:请求的路径
   // 当客户端以GET方法请求/hello路径时,会执行后面的匿名函数
   r.GET("/hello", func(c *gin.Context) {
      // c.JSON:返回JSON格式的数据
      c.JSON(200, gin.H{
         "message": "Hello world!",
      })
   })

   // 启动HTTP服务,默认在0.0.0.0:8080启动服务
   r.Run(":8001")
}

func Cors() gin.HandlerFunc {
   return func(c *gin.Context) {
      method := c.Request.Method
      c.Header("Access-Control-Allow-Origin", "*")                                                     // 可将将 * 替换为指定的域名
      c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization") //你想放行的header也可以在后面自行添加
      c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")              //我自己只使用 get post 所以只放行它
      c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
      c.Header("Access-Control-Allow-Credentials", "true")

      // 放行所有OPTIONS方法
      if method == "OPTIONS" {
         c.AbortWithStatus(http.StatusNoContent)
      }
      // 处理请求
      c.Next()
   }
}
复制代码

再次运行,就会正常获取如图:

跨域请求成功.png

3. Nginx反向代理解决跨域问题

3.1. windows安装(其它系统自行搜索)

windows安装nginx

nginx包.png

3.2. 修改配置文件conf/nginx.conf

#location / {
#    root   html;
#    index  index.html index.htm;
#}

# ********修改方向代理到后端的路由上********
location / {
    proxy_pass http://172.20.3.234:8001/;
}
复制代码

再次运行,在不使用跨域中间件下,也能正常通信

跨域请求成功.png

3.3 nginx其它功能作用

可参看Nginx作用

分类:
后端
标签:
分类:
后端
标签: