一次前端跨域问题解决

因工作需要要开发一套前后端分离的验证平台，前端为vue3 Element-plus框架，后端为Go Gin框架，由于处于开发阶段前后端分开启动服务，前端启动命令npm run dev，后端启动命令go run main.go

问题起因：前端借助axios向后端请求数据并渲染
问题报错：请求失败，在google chrome浏览器上F12查看报错
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

问题解决过程：

1. 查询资料说需要在前端设置跨域，因自己用的vite-vue3，所以在vite.config.js设置如下

export default defineConfig({
  plugins: [vue()],
  server: { //主要是加上这段代码
    host: '127.0.0.1',
    port: 8080,
    cors: true, 
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8081/',   //实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    '/api2': {
      // 后台地址
      target: 'http://127.0.0.1:8956/',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api2/, '')
    }
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

})

2. 启动前端时需要指定config文件启动，所以在package.json设置启动选项

"scripts": {
    "dev": "vite  --config vite.config.js"
}

3. 以上设置完后启动服务后发现前端依然是跨域报错，再次定位怀疑是前端没生效，查询诸多资料后依然无解，冷静思考后发现后端有前端的请求发过来，说明前端跨域生效，后端应该也有跨域问题，在go的main函数中增加跨域设置后前端访问后端数据正常了

    r := gin.Default() //1.指定默认路由
    r.Use(cors.New(cors.Config{
        AllowOrigins:  []string{"http://127.0.0.1:8080", "http://127.0.0.1:8956"},
        AllowMethods:  []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},
        //AllowHeaders:  []string{"Origin", "Content-Type", "Authorization"},
    }))