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

本文主要是介绍前后端分离，跨域问题的解决方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

我的一些配置：

后端项目地址：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>'
        }
      }
    }
  }
  

这篇关于前后端分离，跨域问题的解决方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！