提供zblog模板_zblog主题_wordpress模板的下载和定制

windows+phpstudy+Apache设置允许跨域请求的方法

天兴工作室 2023-01-09 14:00 教程 1111 0 评论


最近在开发一个vue3项目,在本地开发测试的时候遇到了axios请求跨域的问题。vite本地开发预览的地址是“http://localhost:3000/”,phpstudy的本地web地址是“http://localhost:80”。

控制台就会报错误,火狐浏览器报错如下:

已拦截跨源请求:同源策略禁止读取位于“请求url” 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。状态码:301。

谷歌浏览器报错如下:

Access to XMLHttpRequest at '“请求url”' from origin '“本地url”' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

去网上搜索“vite跨域”、“vue跨域”或者“Apache跨域”的时候按照多篇教程设置均不成功。因为每个人的电脑环境都不太一样,所以我在最终设置成功后写了此文并加上了电脑环境关键词

开发电脑是windows11,php环境用的是phpstudy面板,服务器应用是Apache2.4。设置允许跨域请求的具体步骤如下:

1:打开“C:\phpstudy_pro\Extensions\Apache2.4.39\conf\httpd.conf”,找到“#LoadModule headers_module modules/mod_headers.so”,去掉全面的“#”;

2:打开“C:\phpstudy_pro\Extensions\Apache2.4.39\conf\vhosts\域名.conf”,添加如下代码:

Header add Access-Control-Allow-Origin *

Header add Access-Control-Allow-Methods *

Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"

添加完成后如下图所示:

windows+phpstudy+Apache设置允许跨域请求的方法 Apache跨域 vite跨域 vue跨域 phpstudy跨域 教程 第1张

最后去phpstudy面板重启下Apache服务即完成了允许跨域配置


没有找到能解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

欢迎 发表评论: 取消回复

请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
  • 登 录
  • 注册账号 忘记密码?
  • 注 册
  • 已有账号?直接登录 忘记密码?
  • 社交账号登录