项目场景:
vue使用axios访问php接口访问不到数据 ,项目是直接从服务器拉下来的,接口是laravel写的,把接口放在自己的服务器上,配置好域名,vue环境在本地测试
问题描述:
它线上是有一个完整的项目的,没问题,弄到本地测试后,只改了一个接口地址,第一个问题就是报跨域的错误,这是报错信息
Access to XMLHttpRequest at 'http://xxx.xxx.xxx'
from origin 'http://localhost:xxxx' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource.
之后根据我之前的经验,我为了省事,直接在index.php入口文件加了请求头
header('Access-Control-Allow-Origin: *');
紧接着又报了一个错
Access to XMLHttpRequest at 'http://xxx.xxx.xxx' from origin
'http://localhost:xxxx' has been blocked by CORS policy:
Response to preflight request doesn't pass access control
check: The 'Access-Control-Allow-Origin' header contains
multiple values '*, http://localhost:xxxx',
but only one is allowed.
网上查了一下,大概意思是说vue这边已经设置过了,不需要服务器再设置 然后我又根据报错信息试了一下其他几个header头,最后设置了这个
header('Access-Control-Allow-Credentials: true');
成功访问到数据
有的接口是异步的,还是拿不到数据,浏览器请求头报Provisional headers are shown
这个需要把axios的请求超时的时间timeout的时间改长
这样,运行的项目就和原本的一样了
原因分析:
说实话一开始我一看到跨域,就被限制在如何去解决跨域了,忽略了本身的报错信息,查找如何解决跨域,代理,nginx反代理,然后遇到头信息添加最多的还是origin,最后还是仔细看每个尝试后的报错信息后,只设置了允许发送cookies这个请求头,就能成功访问到数据了,还要看一下请求的接口url是不是要自己请求的新手小白一个:
只是简单记录一下,欢迎大家指导讨论