vue+axios接口报错跨域问题,Access-Control-Allow-Origin。

第一次写接口配置,一脸懵逼,还报错。
他们写的项目是pc端前后端不分离的,我的是手机端前后端分离,我接他们接口时就这几个错来回报。

现在后端改成了有api后缀的。我依旧调用接口都是直接回到他的login页面。

/////////////////////////////////之前的报错 ////////////////////////////

这是我之前设置的,然后报这个错误
ZW(_D}HGJ7P}3`%ISM]5}YB.png

Q4`6_AO2H21MYPFRZR99Q}A.png
D}(_N0}NXVD4_@[PT1JIQ%B.png

然后这样设置能打印出东西,但是又显示这玩意。
image.png
image.png

image.png
image.png

后端说还在调,有时候我还能打印出他的pc页面数据,像这样子。
DVL5QC3RQ(LS6)AT6W3TLEV.png

阅读 6.3k
2 个回答

信息太多了。。。又很乱。
首先,proxy 配置了 /api 接口,webpack 只会拦截对 /api 目录的请求,其他请求仍旧由 webpack-dev-server 响应,所以你请求 prjUer/login 的话,应该报 404 等错误,而不是跨域;
然后,这里报了跨域,报错信息说得很清楚了,你是在浏览器里从 localhost 向那个 IP 发请求,这个请求根本没经过你的 webpack-dev-server ,所以报跨域。


所以要解决问题至少要做如下改动:

  1. 为所有可能用到的(由后端提供的)目录配置 proxy;
  2. 前端发请求不能带 IP、域名等信息,直接请求对应目录。

可能还有其他问题,先解决这里再说。

最简单的方法,由后端设置Access-Control-Allow-Origin

代理方法: 就像你写的proxy,但是我看你写的,并不是所有的接口都有api,比如login,也就是这些接口会跨域

不过我还是建议你先测试一下,拿接口去postman等工具跑一下,看看是不是正常的接口,别白忙活半天

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题