跨域是浏览器的专用概念,指的是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;
}