uni-app H5读取接口的跨域问题解决方案

乔帮主 发布于 安装使用 2021-12-09 17:41:43

跨域是浏览器的专用概念,指的是js代码自己访问来源站点之外的站点。比如一个站点网页中的js代码,请求了B站点的数据,就是跨域。应用程序、小程序等非H5平台,不涉及跨域问题。
由于uni-app是标准的前后端分离模式,开发h5应用时,一般会使用不同的域名,H5站通过接口请求调用服务端数据时,就会出现跨域访问错误提示。

解决方案:

以ShopWind电商系统为例,服务端接口域名为api.shopwind.net,运行目录为apiserver/web,H5访问域名为h5.shopwine.net。H5站点请求接口数据出现跨域访问错误提示。

1、打开apiserver/web/index.php文件,在文件头部增加如下代码:

<?php
/**
 * 解决H5端跨域问题
 * 如果需要配置H5端,请把下面注释去掉,然后把域名改为自己的,请务必填写域名,请不要使用通配符(*)以免引发安全问题
 */
header("Access-Control-Allow-Origin:https://h5.shopwind.net"),
header("Access-Control-Allow-Headers:Content-Type"),
header("Access-Control-Allow-Methods:POST"),
header("Access-Control-Allow-Credentials: false"),

2、如果api接口地址不是独立的域名而是用“域名/api“访问,则需要打开frontend/web/api/index.php文件,在文件头部增加如下代码

<?php
/**
 * 解决H5端跨域问题
 * 如果需要配置H5端,请把下面注释去掉,然后把域名改为自己的,请务必填写域名,请不要使用通配符(*)以免引发安全问题
 */
header("Access-Control-Allow-Origin:https://h5.shopwind.net"),
header("Access-Control-Allow-Headers:Content-Type"),
header("Access-Control-Allow-Methods:POST"),
header("Access-Control-Allow-Credentials: false"),

3添加伪静态规则(以下是ng,如果是apache自行转化下)

location / {
  try_files $uri $uri/ /index.html;
}
最后编辑于 2023-04-08 01:37:07
1 1276

回复(1)

沙发
如果接口地址使用的是非独立域名,即使用 域名/api 来访问的话,则修改 frontend/web/api/index.php 文件
发布于 2021-12-28 23:07:04
回复
Re :

乔帮主 这家伙什么都没留下

  • 回答

    11
  • 发布

    21
  • 经验

    1130

内容精选

联系我们

  • 微信官网

    关注公众号

    系统更新,推送提醒
  • 开发交流群

    技术交流Q群

    安装使用,开发交流

垂询热线:18978189162