H5 本地跨域设置

最近开发H5项目的时候遇到“跨域”问题，总结一下问题及结果

1、本地运行设置反向代理

这种跨域问题一般是在本地运行的时候遇到，我们可以在mainfest.json-源码视图-devserver-proxy里面设置。

1、配置里面 “^/api” : “” 表示将域名URL里面的api设置问空，这个要看接口是否需要。有时候也会设置为"^/api" : “/api”

1、标识1和标识2需要保持一致，这样本地跨域才能成功。这个表示本地运行的时候遇到/api就会走代理里面的URL。

2、 本地运行正常，但是发布H5之后的页面，接口显示跨域问题

这种问题属于浏览器的同源策略（跨域限制）导致。具体原因是:

1、浏览器为了安全，会限制网页从不同域名（或子域名、端口、协议）的服务器获取数据。当 H5 页面的域名与接口域名不一致时，就会触发跨域报错。
2、当你使用 https://pmsapi.xxx.com.cn/ 时，H5 页面的域名（假设是 pms.xxx.com.cn 或其他域名）与 pmsapi.xxx.com.cn 不同，属于跨域请求，浏览器会拦截。
3、 改成https://pms.xxx.com.cn/ 后，该域名可能与 H5 页面的域名是同源（或服务端配置了允许该域名跨域的 CORS 头），因此请求被允许。

问题2的解决方案

1、服务端配置 CORS 跨域头

Access-Control-Allow-Origin: 你的H5页面域名（或通配符*，仅测试用）
Access-Control-Allow-Methods: POST, GET, OPTIONS等
Access-Control-Allow-Headers: Content-Type, Authorization等

这样浏览器会允许 H5 页面从该域名请求接口。

2、前端配置

1、什么都不用更改，直接打包。（这种配置H5页面的URL会自动填充）

2、将configApi.js文件里面得URL更改为与H5页面域名一样的地址。