一、问题现象

项目采用的VUE前后端分离开发方案,前端axios GET请求chrome调试模式显示:

 http stauts:CORS error

请求头:Request URL: http://localhost:8080/admin/auth/info?token=d7321df6-7793-4d0f-9b0b-b7c7b406a452&random=0.5842914032894946
 Referrer Policy: strict-origin-when-cross-origin
 Provisional headers are shown
 Accept: application/json, text/plain, */*
Referer: http://localhost:9527/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36
X-Litemall-Admin-Token: d7321df6-7793-4d0f-9b0b-b7c7b406a452
token: d7321df6-7793-4d0f-9b0b-b7c7b406a452
random: 0.5842914032894946

没有响应信息,初步判断请求在客户端阶段就被拦截了。

二、排查过程

同事同样类似的项目是可以正常请求的,经过各种排查无果。

三、解决

尝试各种办法后,最终使用添加代理的方式成功vue.config.js。

devServer: {
  port: port,
  // open: true,
  // 代理
  proxy: {

    '/admin': {
      target: 'http://localhost',
      changeOrigin: false
    },
  },
  overlay: {
    warnings: false,
    errors: true
  }
},

四,问题回归

问题很奇怪,同样的配置同事的项目就可以。具体原因未知。

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐