h5 ajax 跨域解决

本文介绍了一种通过在web.xml中添加自定义过滤器HeaderFilter来解决跨域问题的方法。该过滤器通过设置HTTP响应头来允许指定源进行跨域请求,同时支持多种请求方法和头部信息。

1.web.xml 添加filter

<!-- 跨域问题解决 -->
  <filter>
    <filter-name>header</filter-name>
    <filter-class>com.jeeplus.modules.api.common.HeaderFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>header</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <filter>

2.新建自定义过滤方法

package com.jeeplus.modules.api.common;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @TODO 头部过滤器
 * @Author 魏东
 * @Date 2019/4/11 16:04
 */
public class HeaderFilter implements Filter {
    public void destroy() {

    }

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest)req;
        HttpServletResponse response = (HttpServletResponse) res;
        String originHeader = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", originHeader);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "0");
        response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token,accessToken");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }

    public void init(FilterConfig arg0) throws ServletException {

    }

}

 

在纯HTML5应用中,如果使用axios发起请求而遇到问题,通常可以通过以下几种方法来解决: 1. **JSONP (JSON with Padding)**:当允许服务器返回特定格式(如`<script>`标签)的数据时,可以利用JSONP技术。创建一个动态添加到页面的script元素,并设置其src属性指向API,这个API会针对你的回调函数名返回数据。 2. **CORS (Cross-Origin Resource Sharing)**:这是最常用且推荐的方式。在服务端设置响应头`Access-Control-Allow-Origin`,指定允许哪些名访问资源。浏览器会在发送AJAX请求前先检查这个头部信息。 3. **代理(Proxy)**:如果你无法直接修改服务器配置,可以在前端部署一个代理服务器,所有的请求都通过这个代理转发到目标服务器,然后将结果返回给客户端。 4. **同源策略规避(Same Origin Policy)**: 如果目标地址不在同一名、协议或端口下,但在路径层级上可以通过嵌套或改变URL形式(例如使用/#/api/...)来绕过同源限制。 记住,以上方法大多适用于开发环境,生产环境还是建议让后端处理CORS设置。以下是使用axios的一个示例,展示如何通过axios在有服务器支持CORS的情况下处理请求: ```javascript axios.get('https://example.com/api/data', { headers: { 'X-Requested-With': 'XMLHttpRequest' } }) .then(response => { console.log(response.data); }) .catch(error => { if (error.response) { // 请求已发出,但服务器响应的状态码表示错误 console.error(response.status, response.headers); } else { // 未发出请求时发生的错误,可能是网络错误 console.error(error.message); } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

筱芙淘趣坊

为嗷嗷待哺的我助力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值