美文网首页
跨域解决方案

跨域解决方案

作者: BrightHeart | 来源:发表于2019-04-11 17:46 被阅读0次

1.使用Jsonp解决跨域(不推荐,因为只支持get请求,不支持post请求)

1.前端AJAX请求dataType改为jsonp,且增加jsonp:"jsonpCallback"

$.ajax({
    type:"GET",
    async:"false",
    url:"127.0.0.1:80/xxxx",
    dataType:"jsonp",
    jsonp:"jsonpCallback",//服务端用于接收callback调用的function名的参数
    success:function(data){
        alert("data");
    },
    erro:function(){
        alert("erro");
    }

})

2.请求的URL后面会增加一个jsonpCallback=xxx的随机数,服务端返回值时,需要把jsonpCallBack的随机数一起返回
3.type改为ipost请求时,但是实际请求依旧是get

2.使用HttpClient进行转发(不推荐,因为效率低,会发送两次请求)

1.A项目需要调用B项目的接口是,A项目前端ajax调用后端URL,如192.168.1.1:8080/forwardB
2.在forwardB中,使用HttpClient调用192.168.1.1:8081/xxxx

相当于发送两次请求,但是注意保证域名和端口号一致问题
好处:安全,隐蔽了真实的接口调用

3.设置响应头允许跨域(推荐,适合小公司解决跨域问题)

1.通过fileter过滤器中写入ACCESS-Control-Allow的头信息,进行跨域访问,代码如下:

public class CrossDomainFilter implements Filter{
    @Override
    public void destroy() {
        // TODO Auto-generated method stub
    }
 
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {    
        //设置跨域请求  
        HttpServletResponse response = (HttpServletResponse) res; 
        //此处ip地址为需要访问服务器的ip及端口号
        response.setHeader("Access-Control-Allow-Origin", "http://192.168.1.1:8080");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
        response.setHeader("Access-Control-Max-Age", "3628800");   
  
        System.out.println("设置跨域请求");  
        chain.doFilter(req, response);    
    }
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // TODO Auto-generated method stub
    }

}

<!--"Access-Control-Allow-Origin"表示的是访问服务端的ip地址及端口号,也可以设置为*表示所有域都可以通过;

"Access-Control-Allow-Credentials"表示的是跨域的ajax中可以携带cookie,此时第一项设置不能为*,需指定域名;

"Access-Control-Allow-Methods"表示的是允许跨域的请求方法;

"Access-Control-Allow-Headers"表示的是允许跨域请求包含content-type头;

"Access-Control-Allow-Max-Age"表示的是在3628800秒内,不需要再发送预检验请求,可以缓存该结果,一般默认。-->

2.web.xml配置filter

    <!-- 跨域设置 -->
    <filter>
        <filter-name>crossFilter</filter-name>
        <filter-class>com.chinamobile.bcop.console.security.filter.CrossDomainFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>crossFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

4.适应Nginx搭建API网关接口(强烈推荐,因为保证域名和端口一致,以项目区分方向代理到真实的服务器地址)

1.原理:保证域名和端口都是相同的,根据项目不同名称使用nginx进行转发到真实的服务器地址
2.注意,保证域名和端口都是相同的,只是项目不同
3.这种方案是可以彻底解决网站的跨域问题的,而且可以保证整套系统的安全性问题

如客户端请求api.xxxx.com/a,nginx根据/a,转发到项目a(192.168.1.1:8080),
客户端请求api.xxxx.com/b,nginx根据/b,转发到项目b(192.168.1.1:8081)

5.使用Zuul微服务搭建API网关(强烈推荐,Spring Cloud)

相关文章

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • 前端如何解决常见跨域问题

    跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 loca...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • 浏览器跨域及其解决方案

    title: 浏览器跨域及其解决方案author: Maydate: 20220428 什么是跨域跨域的表现解决跨...

  • 跨域解决方案

    跨域解决方案 跨域解决方案有:设置document.domain,使用带src标签,JSONP,navigatio...

  • 跨域

    参考资料 HTTP访问控制(CORS)跨域解决方案跨域详解

  • Angular访问WebApi出现options方法

    解决方案: 解决跨域:

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

  • ZUUL跨域问题

    云环境中每个服务自己有跨域解决方案,而网关需要做最外层的跨域解决方案.如果服务已有跨域配置网关也有,会出现*多次配...

网友评论

      本文标题:跨域解决方案

      本文链接:https://www.haomeiwen.com/subject/elxldqtx.html