关于跨域问题的几种解决方案

1.什么是跨域?

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;

跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名。

解决方案:

一.跨域问题:能够正常请求,但是没有办法获取到响应结果

  b工程中直接在ajax访问a工程servlet

 1 $(function(){
 2             $("#button").click(function () {
 3                 //获取到文本框的值
 4                 var username=$("#username").val();
 5                 //发送Ajax请求www.a.com的A工程
 6                 $.ajax({
 7                     url:"http://www.a.com:8080/projectA/AServlet?username="+username,
 8                     type:"GET",
 9                     success:function (result) {
10                         alert(result);
11                     },
12                     error:function () {
13                         alert(‘系统错误~‘)
14                     }
15                 });
16             });
17         });

A工程中能正确接收值

 但是success回调函数会报错提示

No ‘Access-Control-Allow-Origin‘ header

 解决方案一:设置请求头,在请求的资源中设置Access-Control-Allow-Origin请求头

//设置请求头1 response.setHeader("Access-Control-Allow-Origin", "*");

正常回调

解决方案二:JSONP解决跨域问题

普通的跨域访问问题,浏览器会进行拦截,凡是src属性的都不会拦截
JSONP实现原理:动态加载<script>标签,利用src属性进行服务器资源的访问,但是只支持Get请求

1.在我们的Ajax请求当中,需要以JSONP方式请求(通过jquery手段,动态生成script)
        
                    jsonp:"代表的是前台传给后台,后台再传递给你    jsonpCallBack"
                
                2.在AJAX请求当中需要将返回的数据格式指定为jsonp
                    
                      dataType:"JSONP"

 3.JSONP需要以Get请求发送 

        ?username=zhangsan
               
                4.后台需要做的事情:
                    1.正常接收数据        
                    
                    2.返回数据
                        
                        前台传递过来的jsonp需要原路返回

String jsonp=request.getParameter("jsonpCallBack");

需要将返回的数据转换为JSON   success
                        
                        response.getWirter.write(jsonp+"("+返回的数据+")");

修改Ajax请求:

$(function(){
            $("#button").click(function () {
                //获取到文本框的值
                var username=$("#username").val();
                //发送Ajax请求www.a.com的A工程
                $.ajax({
                    url:"http://www.a.com:8080/projectA/AServlet?username="+username,
                    type:"GET",
                    jsonp:"jsonpCallBack",      //回调函数
                    dataType:"JSONP",
                    success:function (result) {
                        alert(result);
                    },
                    error:function () {
                        alert(‘系统错误~‘)
                    }
                });
            });
        });

更改后台请求,需要将JSONP原路返回

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接受数据
        String username=request.getParameter("username");
        System.out.println("接收的数据:"+username);

        //接受Ajax传递的数据
        String jsonpCallBack = request.getParameter("jsonpCallBack");
        System.out.println("jsonpCallBack:"+jsonpCallBack);

        String success = JSON.toJSONString("success");
        response.getWriter().write(jsonpCallBack+"("+success+")");

    }

成功解决:

解决方案三:使用HTTPClient解决:就是不通过浏览器发送请求

B工程的页面发送的Ajax没有办法请求到A工程,因为浏览器会拦截,走后台,后台通过HTTPClient请求请求到A工程,获取到响应结果

1.B工程的bindex.jsp页面请求到B工程的Servlet

$(function(){
            $("#button").click(function () {
                //获取到文本框的值
                var username=$("#username").val();
                //发送Ajax请求www.a.com的A工程
                $.ajax({
                    url:"BServlet?username="+username,
                    type:"GET",
                    success:function (result) {
                        alert(result);
                    },
                    error:function () {
                        alert(‘系统错误~‘)
                    }
                });
            });
        });

2.B工程的BServlet去模拟HTTP请求到A工程

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //内部通过HTTPClient进行转发
        //构建一个连接
        CloseableHttpClient client = HttpClients.createDefault();
        //构建请求
        HttpGet get=new HttpGet("http://www.a.com:8080/projectA/AServlet?username="+request.getParameter("username"));
        //发送请求
        CloseableHttpResponse httpResponse = client.execute(get);
        //获取返回结果
        String result = EntityUtils.toString(httpResponse.getEntity());
        //将A工程响应结果给页面
        response.getWriter().write(result);

    }

3.A工程处理请求

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                    //1.接受数据
                    String username=request.getParameter("username");
                    System.out.println("接受的数据:"+username);

                    //2.响应结果
                    response.getWriter().write("success");

                }

成功解决:

原文地址:https://www.cnblogs.com/chx9832/p/12268914.html

时间: 2024-08-28 05:36:48

关于跨域问题的几种解决方案的相关文章

前端跨域问题的几种解决方案

前端跨域问题 一:同源策略 1.what's this 所谓同源是指,域名,协议,端口相同.当浏览器运行一个JS脚本时会进行同源检测,如果不同源是不能执行的. 2.源继承 来自about:blank,javascript:和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息. 3.变更源 变更源可以实现基础域相同的不同页面的跨域问题. 如:a.baidu.com/index.html 通过 iframe 引入 b.baidu.com/ind

跨域的另一种解决方案CORS(CrossOrigin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

(转)跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片或者脚本.但是Javascript脚本是不能获取这些资源的内容的,它只能被浏览器执行或渲染.主要原因还是出于安全考虑,浏览器会限制脚本中发起的跨站请求.(同源策略, 即JavaScript或Cookie只能访问同域下的内容).跨域的解决方案有多重JSONP.Flash.Iframe等,当然还有COR

解决ajax跨域问题【5种解决方案】

什么是跨域问题?跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源.跨域问题是针对JS和ajax的,html本身没有跨域问题. 查看浏览器开发者工具Console报错: Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allo

jQuery 跨域访问的三种方式 No &#39;Access-Control-Allow-Origin&#39; header is present on the reque

问题: XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1 Resource interpreted as Script but transferred

妥善的ajax跨域提交post请求的解决方案,结合PHP与jquery

开发背景: 在开发中采用了一个新的架构,将大部分客户的留言功能集成到一个公共API提交保存,采用不同的用户名区分,供客户查询自己网站的留言,这样节约了客户网站的资源,也提升了维护性. 那么在提交时不能采用直接的post提交,否则会产生跳转,使访客混乱,所以采用ajax提交留言内容至公共服务器:http://wx.igooda.cn/index.php/messagesave,但尝试后发现不能提交post请求,百度后查询结果是跨域只能是get请求,这对留言内容多的来说,是不可行的.还有一种解决方案

System.Web.Http.Cors配置跨域访问的两种方式

System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心得.在webapi中使用System.Web.Http.Cors配置跨域信息可以有两种方式.  一种是在App_Start.WebApiConfig.cs的Register中配置如下代码,这种方式将在所有的webapi Controller里面起作用. using System; using Sys

前端解决跨域问题的8种方案(转)

前端解决跨域问题的8种方案(最新最全) 原文:http://www.cnblogs.com/JChen666/p/3399951.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.jshttp://www