Vue 与 Gin 开发环境跨域问题

2024-01-05 by dongnan

环境描述

前后端分离项目，分别是 Vue3前端框架与 Gin后端框架。

前端

node版本 v20.10.0
构建工具 vite v5.0.10
框架版本 vue@3.3.12
访问地址 http://localhost:5173/

后端

go版本 go1.21.3
框架版本 gin v1.9.1
API地址 http://localhost:8000/weixing

问题描述

在前端调用后端API接口出现 CORS Missing Allow Origin 错误：

XHROPTIONS
http://localhost:8000/weixing/step1
CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/weixing/step1.
 (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/weixing/step1.
 (Reason: CORS request did not succeed). Status code: (null).

什么是跨域？

从环境描述中，我们知道前端地址与后端地址端口不一致，所以导致 CORS 问题。

Cross-Origin 主要是浏览器的同源策略，它是浏览器最核心、最基本的安全功能。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同则为跨域。

解决方法

前端和后端均有解决方案，这里采用前端使用代理为例。

配置代理

编辑 vue 项目中的 vite.config.js 文件，进行配置：

// 其它代码省略
export default defineConfig({
  resolve: {
    xxx
  },
  css: {
    xxx
  },
  plugins: [
    xxx
  ],
  server:{
    // 配置代理
    proxy:{
       '/weixing':{
           target:"http://localhost:8000/", //跨域地址
           changeOrigin:true,               //支持跨域
           // rewrite:(path) => path.replace(/^\/weixing/, "") //重写路径,替换
       }
    }
 },
})

配置好代理后，直接在封装好的的API中，使用前端服务器地址即可：

# 文件 src/api/path.js
const base = {
    baseURL: "http://localhost:5173",   //这里
    step1: "/weixing/step1",
    //省略
}

export default base

# 文件 src/api/index.js
import axios from "../utils/request"
import path from "./path"

const api = {
    postStep1(name, email) {
        return axios.post(path.baseURL + path.step1, {
            name: name,
            email: email,
        })
    },
    //省略
}

export default api

关闭服务器，并再次启动开发服务器：

npm run dev

验证

请求API成功