前后端分离,跨域问题的解决方法

我的一些配置:

后端项目地址:http://localhost:8088/mySystem/

前端项目地址:http://localhost:8080/

方法一:

从后端解决,controller中使用@CrossOrigin,这个方法的粒度比较细,但在controller比较多的时候,用起来比较烦


方法二:

从前端解决,在Vue cli的配置里面,有一个devServer.proxy,使用它在前段进行一些配置,具体如下:

devServer.proxy:

  • Type: string | Object

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

    devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

    module.exports = {
    devServer: {
    proxy: 'http://localhost:4000'
    }
    }

    这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

    如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware

    module.exports = {
    devServer: {
    proxy: {
    '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
    },
    '/foo': {
    target: '<other_url>'
    }
    }
    }
    }

posted @   z-laoyao  阅读(172)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示