[PanJiaChen/vue-admin-template]重新整理一下4.0版本使用正式API无效问题

2023-12-11 627 views
5

最近做了一个新项目,页面和API都搞定了,但是联合调试的时候出现了问题,已经用2天时间去查询各种资料,包括基本读取本项目所有issues关于API的问题,发现目前并不特例,而回答方面并没有一个是正确的。

1、在mian.js里持续注释掉的代码

这个代码注释掉对项目有影响 所以直接注释掉进行开发 image

2、在vue.config.js更换代理地址 无效 无论怎么配置

image

3、注释掉vue.config.js的本地 mock代码 在.env文件中修改请求地址

image

3号问题发送option请求以后会报错 image

看调试没有继续发送post请求,没有找到前端什么地方给拦截了 和提问的开头说的一样,同样的接口,使用以前版本的项目直接登录成功,跨域配置很完善,所以问题应该是出在前端。

要么是我配置错了,要么就是我配置了,要么就是我配置错了 。

要么就是我技术差劲,所以有知道正确配置方式的大佬麻烦请告知一下新手。

我真的尽力了,所以找不到正确解决方案也请见谅。

我没有做一个伸手党,努力解决问题了,但是没有找到办法。

回答

7

所以麻烦大佬谁可以配置好一个已经可以请求自己API的模版,感激。

认真学习以后我会去修改自己的项目代码。

1

之前的版本,指哪个版本?版本号是多少。

9

@PanJiaChen

大佬好

"version": "3.6.0"

9

大概了解了,我等会更新一下文档。

0

你暂时在请求的url里面写死请求地址就可以了。 比如

export function login(data) {
  return request({
    url: 'http://wechat-token-api/user/login',
    method: 'post',
    data
  })
}
9

@PanJiaChen 感谢大佬

7

image image image image image

4

不知道后端配置跨域以后,前端这么配置是否正确,目前还是options请求正常,然后就没有然后了

1

这个接口没有问题,使用3.6版本可以直接登录

7

你把整个mock去掉试试

 proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
3

你为什么还是去改了VUE_APP_BASE_API。。。都说了其它什么都不要改

3

image

取消修改,但是结果还是一样的

7

@PanJiaChen

3

没有其他人遇到一样的问题么?还是现在大家都没有用新版本写项目?

7

重启过服务么

3

你有自己的接口,直接干掉mock不就好了。

9

我怎么测跨域?

6

稍等,我把接口直接上线 @PanJiaChen

0

@PanJiaChen 已经更新为正式地址了,请查看

9

这个接口地址有一个3.6版本的项目正在使用,没有跨域问题

3

image

@PanJiaChen 感谢大佬,确实对细节配置不是很熟悉,后端也不允许前端提交cookie,还是自己没有很细心的查阅源码,抽时间应该多学习一下配置细节,这一块算重点配置项了,可惜为忽略了。

5

我优化一下文档。

0
所有查看本问题的同学,解决方案为: 在api文件夹下面的所有请求地址使用完整地址

image

遇到跨域问题 询问后端是不是禁止掉cookie的发送,如果是那么协商一下,如果确实规定不可以发送

image

停止前端发送cookie,把红线位置 true => false

然后去 vue.config.js 里面 mock数据删掉 最后为

image

.env文件不要修改 .env文件不要修改 .env文件不要修改

6

@PanJiaChen 再次感谢热心解决疑问

2

4.2.1版本按这个修改了, 依然有CORS问题。 请求失败。

6

解决了, 后端也要添加cors支持。

4

我没太明白,所有的api下的都使用完整服务端地址?那.env.development文件中的VUE_APP_BASE_API是干嘛的,不就是配置前缀地址吗?我的错误有点不一样,知道怎么处理吗? 微信截图_20191025142430

8

大佬,提个建议,这个项目能不能正常的从后台获取数据就不要用mock了,mock后从后台获取数据写法文档也没有

4

使用最原始的4.1.0 源代码,严格且仅按照修改三步骤改了以后,还是提示跨域错误?

错误提示: POST http://localhost:9000/user/login net::ERR_FAILED Access to XMLHttpRequest at 'http://localhost:9000/user/login' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.