情景:前后端分离经常需要解决的一个重大问题就是跨域,经常是后端人员配置允许跨域访问,但是前端有些好用的框架也可以很方便的解决跨域问题。这里记录一下vue解决跨域问题的一种方法。
说明:vue项目启动时默认的端口是8080(可以在config目录下的index.js文件中修改),跟后端的端口肯定不一样,这样vue页面请求后端接口的时候,由于端口不一致,肯定就存在跨域问题,而vue可以通过代理很好的解决跨域问题。
解决方法:

  1. 修改 build 目录下的 webpack.dev.conf.js 文件,添加代理对象
    vue配置代理解决跨域问题
    说明:
    ① 蓝色框是初始化的时候的样子
    ② 蓝色框下面是配置之后的样子
    ③ ‘/product/*’ 表示前端的请求路径是以product开头的时候进行拦截,target 表示后端接口的基础路径(ip + 端口),拦截之后会将后端接口的基础路径加在请求的相对路径之前,拼接成完整的路径,changeOrigin 表示允许跨域。
  2. 在项目 src 目录下新建 utils 目录,在 utils 目录下新建 utils.js 文件,文件内容如下图,目录名称和文件名称随意
    vue配置代理解决跨域问题
  3. 在页面上请求接口,拿到数据进行渲染
    vue配置代理解决跨域问题
    vue配置代理解决跨域问题
    说明:先把这个方法记录下来,以后发现什么好的解决办法再来补充一下

相关文章:

  • 2022-12-23
  • 2021-04-03
  • 2021-06-30
  • 2021-04-10
  • 2021-06-11
  • 2022-12-23
  • 2021-07-03
猜你喜欢
  • 2021-12-04
  • 2021-12-25
  • 2022-12-23
  • 2021-09-07
  • 2022-12-23
  • 2022-12-23
  • 2022-01-03
相关资源
相似解决方案