解决跨域问题:H5页面与接口一起部署

本文介绍如何在SpringMVC项目中配置静态资源映射,包括JS、CSS、图片等,确保h5页面正常访问,避免跨域问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 在webapp下新建一个文件夹“h5”,存放所有的h5页面代码

2. 修改配置文件,配置静态资源映射

由于在web.xml中配置了spring mvc拦截了所有请求,所以当你设置 

<servlet-mapping> 
    <servlet-name>springMVC</servlet-name> 
    <url-pattern>/</url-pattern> 
</servlet-mapping>

的时候会影响到静态资源文件的获取,这样就需要有这个标签来帮你分类完成获取静态资源的责任。 
在springMVC-servlet.xml文件 ,配置静态资源的路径,这里新增了/h5/的路径

<mvc:resources mapping="/js/**"  location="/js/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/img/**" location="/img/" />
<mvc:resources mapping="/pictures/**" location="/pictures/" />
<mvc:resources mapping="/h5/**" location="/h5/" />

3. 配置完成之后,就可以成功访问到h5下面的静态页面了。由于部署在同一目录下,也不会产生跨域问题。

<think>我们正在解决UniApp H5在正式环境中请求接口出现的问题问题是由于浏览器的同源策略(Same-Origin Policy)导致的,当前端页面请求的接口不在同一个(协议、名、端口任一不同)时,浏览器会拦截请求。在开发环境中,我们可以通过配置代理解决,但在生产环境中,需要后端配合设置CORS(资源共享)或使用其他方法。 以下是几种解决方案: ### 1. 后端设置CORS响应头 最标准的做法是让后端在响应头中添加允许的字段。主要需要设置的响应头包括: - `Access-Control-Allow-Origin`: 允许访问的源,可以设置为`*`(表示允许所有,但不够安全)或具体的名。 - `Access-Control-Allow-Methods`: 允许的HTTP方法,如`GET, POST, PUT, DELETE`等。 - `Access-Control-Allow-Headers`: 允许的请求头,如`Content-Type, Authorization`等。 例如,在Node.js中,可以这样设置: ```javascript app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'https://yourdomain.com'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization'); next(); }); ``` ### 2. 使用Nginx反向代理 如果后端不方便修改,或者希望由前端服务器来处理,可以使用Nginx反向代理。将前端的请求发送到同下的一个路径,然后由Nginx转发到目标接口,这样浏览器就不会触发同源策略。 配置示例: ```nginx server { listen 80; server_name yourdomain.com; location /api/ { proxy_pass http://api.targetdomain.com/; # 将/api/路径的请求转发到目标接口 # 如果需要,可以在这里添加CORS头,但通常因为已经是同了,不需要 } # 其他配置... } ``` 前端请求时,将请求地址写为`/api/xxx`,这样浏览器看到的是同请求,而Nginx会将其转发到目标接口。 ### 3. JSONP(仅限GET请求) 如果接口支持JSONP,可以使用JSONP方式发送GET请求。JSONP利用`<script>`标签没有限制的特性来实现请求。但是,JSONP只支持GET请求,且需要后端配合返回特定格式(用JavaScript函数包裹数据)。 UniApp中可以使用`uni.request`设置`dataType: 'jsonp'`: ```javascript uni.request({ url: 'https://api.example.com/data', dataType: 'jsonp', success: (res) => { console.log(res.data); } }); ``` ### 4. 使用WebSocket 如果请求是为了实时通信,可以考虑使用WebSocket,因为WebSocket不受同源策略限制。但需要后端支持WebSocket协议。 ### 5. 将H5应用嵌入到App中,使用原生请求 如果是将H5应用嵌入到App中(如使用UniApp打包成App),则可以使用原生请求,因为原生环境(如Android、iOS)没有限制。在UniApp中,当运行在App环境时,可以使用`plus.net`发起请求,或者继续使用`uni.request`(在App中会自动使用原生请求,不受限制)。 ### 针对UniApp H5生产环境的建议 在生产环境中,推荐使用第一种(后端设置CORS)或第二种(Nginx反向代理)方法。JSONP由于只支持GET,且安全性较低,不推荐作为主要方案。 ### 注意事项 - 在UniApp中,开发环境可以通过`manifest.json`中的`h5`->`devServer`->`proxy`配置代理解决,但生产环境此配置无效。 - 如果后端设置了CORS,前端还需要注意,如果请求带有认证信息(如Cookie),则`Access-Control-Allow-Origin`不能为`*`,必须指定具体名,并且前端需要设置`withCredentials`为`true`(在uni.request中设置`withCredentials: true`)。 ### 示例代码(前端设置凭证) ```javascript uni.request({ url: 'https://api.example.com/data', method: 'GET', withCredentials: true, // 发送凭证信息(如Cookie) success: (res) => { // 处理响应 } }); ``` ### 总结 解决问题需要前后端配合。生产环境中,最常用且安全的方式是后端设置CORS或通过反向代理。请根据实际情况选择合适的方案。 §§相关问题§§ 1. 如何在UniApp开发环境中配置代理解决问题? 2. 使用Nginx反向代理时,如何处理WebSocket的? 3. 在UniApp中,如何判断当前运行环境是H5还是App,以便使用不同的请求方式?</think>### UniApp H5 正式环境问题解决方案 问题是由于浏览器的**同源策略**引起的,当你的 H5 页面名(如 `https://your-domain.com`) API 接口名(如 `https://api.other-domain.com`)不一致时触发。以下是针对 UniApp H5 生产环境的解决方案: #### ✅ 方案一:后端配置 CORS(推荐) **核心原理**:后端服务器设置响应头 **步骤**: 1. 后端添加响应头(以 Nginx 为例): ```nginx location /api { add_header 'Access-Control-Allow-Origin' 'https://your-domain.com'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization'; add_header 'Access-Control-Allow-Credentials' 'true'; if ($request_method = 'OPTIONS') { return 204; } } ``` 2. UniApp 前端设置 `withCredentials`: ```javascript // uni-request.js uni.request({ url: 'https://api.other-domain.com/data', method: 'POST', header: {'Content-Type': 'application/json'}, withCredentials: true // 允许携带凭证 }) ``` #### ✅ 方案二:Nginx 反向代理 **核心原理**:将请求转为同源请求 **步骤**: 1. 配置 Nginx: ```nginx server { listen 80; server_name your-domain.com; location /api { proxy_pass https://api.other-domain.com; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 2. UniApp 请求改为同源地址: ```javascript // 请求路径变为同源 uni.request({ url: '/api/data', // 不再包含外部名 // ... }) ``` #### ✅ 方案三:云服务商解决方案 | 云平台 | 解决方案 | |--------------|---------------------------------| | 腾讯云 | API 网关的配置 | | 阿里云 | 函数计算 FC 的 CORS 设置 | | AWS | API Gateway CORS 配置 | #### ⚠️ 方案四:临时方案(仅测试环境) ```javascript // manifest.json "h5": { "devServer": { "proxy": { "/api": { "target": "https://api.other-domain.com", "changeOrigin": true, "pathRewrite": {"^/api": ""} } } } } ``` > **注意**:此配置仅适用于开发环境,生产环境无效! #### 常见问题排查 1. **预检请求(OPTIONS)失败** 确保后端正确处理 `OPTIONS` 方法并返回 2xx 状态码 2. **证书问题** 如果使用 HTTPS,确保 API 证书有效且包含 SAN(Subject Alternative Name) 3. **缓存问题** 部署后强制刷新浏览器:`Ctrl+Shift+R` (Windows) / `Cmd+Shift+R` (Mac) 4. **UniApp 特定配置** 在 `manifest.json` 中确认 H5 配置: ```json "h5": { "template": "template.h5.html", "router": { "mode": "history" // 或 hash } } ``` > **生产环境最佳实践**:优先采用 **方案一(CORS)** 或 **方案二(反向代理)**,这两种方案符合安全规范且性能最优。避免使用 JSONP 等不安全方案[^1]。 [^1]: MDN Web 文档:源资源共享(CORS),https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值