vue请求php接口跨域

最新推荐文章于 2025-02-01 10:02:54 发布

原创最新推荐文章于 2025-02-01 10:02:54 发布 · 1.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #php

跨域专栏收录该内容

1 篇文章

订阅专栏

本文记录了在本地测试Vue使用Axios访问Laravel接口时遇到的跨域问题及解决方案，包括设置请求头、调整请求超时时间等关键步骤。

项目场景：

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是不是要自己请求的