精华内容
下载资源
问答
  • 跨域问题解决方案:CORS Access to XMLHttpRequest at '*' from origin '*' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-...

    跨域问题解决方案:CORS

    Access to XMLHttpRequest at '*' from origin '*' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    从源'本地路径'访问 '目标路径(请求链接)'文本传输请求已被CORS策略阻塞:对预置请求的响应未通过访问控制检查:请求的资源上不存在'Access- control - allow - origin '报头。

    错误原因:

    本地路径和目标路径不是同一个域名下引起的跨域问题,并且,就算两个域名是同一个一级域名不同二级域名的时候,例如 a.baidu.com  和 b.baidu.com 是属于不同域的,也是会出现这个问题

    介绍

    出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。

    注:这段描述不准确,并不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。

    CORS(跨源资源共享)是一个系统,由传输HTTP标头组成,用于确定浏览器是否阻止前端JavaScript代码访问跨源请求的响应

    同源安全政策禁止以资源跨域访问。但CORS使Web服务器能够表示他们希望选择允许跨资源访问其资源。

    跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求

    如,站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。

    跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS,以降低跨域 HTTP 请求所带来的风险。

     

    解决方案:

    1、如果跨域请求发生在相同一级域名不同二级域名之间

    例如:a.baidu.com  和 b.baidu.com

    跨域直接在邀请求的接口页面中强制设置域为一级域     document.domain = "baidu.com";

    2、设置接口允许ajax跨域访问

    在服务器aspx页面头文件里加:

    <meta http-equiv="Access-Control-Allow-Origin" content="*" />

    在web.config文件中的 system.webServer 节点下 增加如下配置

    <system.webServer>  
        <httpProtocol> 
            <customHeaders> 
                <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> 
                <add name="Access-Control-Allow-Headers" value="x-requested-with"/> 
                <add name="Access-Control-Allow-Origin" value="*" /> 
            </customHeaders> 
        </httpProtocol> 
    </system.webServer>
    

    网上说的解决方案都是Internet Explorer 8 、9使用 XDomainRequest 对象实现CORS。是不是有这么复杂?于是博主各种百度寻找解决方案。最后发现在调用处指定 jQuery.support.cors = true; 这一句就能解决IE8、9的问题了

    这句话的意思就是指定浏览器支持跨域。IE9以上版本的浏览器、谷歌、火狐等都默认支持跨域,而IE8、9却默认不支持跨域,需要我们指定一下。

    //例如
    jQuery.support.cors = true;
    var ApiUrl = "http://b.baidu.com";
    $(function () {
        $.ajax({
            type: "get",
            url: ApiUrl + "api/Charging/GetAllChargingData",
            data: {},
            success: function (data, status) {
                if (status == "success") {
                    alert("ok");
                }
            },
            error: function (e) {
                alert("error");
            },
            complete: function () {
    
            }
        });
    });

    注:我这里设置的*是任意的请求都可以访问,如果需要限制替换成自己的访问地址就可以了。

    参考资料:

     HTTP访问控制(CORS)   https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

    CORS(跨源资源共享)      https://developer.mozilla.org/en-US/docs/Glossary/CORS

     

     

    你有困难我帮忙,我住隔壁我姓王。----------------- 你隔壁的老王宣。

    展开全文
  • 解决ajax跨域问题【5种解决方案】

    万次阅读 多人点赞 2018-09-02 21:31:33
    什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是...

    什么是跨域问题?

    跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题。

    查看浏览器开发者工具Console报错:

    Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.b.com:8080' is therefore not allowed access.

    http://www.abc.com/a/b 调用 http://www.abc.com/d/c(非跨域)

    http://www.abc.com/a/b 调用 http://www.def.com/a/b (跨域:域名不一致)

    http://www.abc.com:8080/a/b 调用 http://www.abc.com:8081/d/c (跨域:端口不一致)

    http://www.abc.com/a/b 调用 https://www.abc.com/d/c (跨域:协议不同)

    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

     

     

    跨域问题怎么解决?

    1、响应头添加Header允许访问

    2、jsonp 只支持get请求不支持post请求

    3、httpClient内部转发

    4、使用接口网关——nginx、springcloud zuul   (互联网公司常规解决方案)

     

    解决方式1:响应头添加Header允许访问

    跨域资源共享(CORS)Cross-Origin Resource Sharing

    这个跨域访问的解决方案的安全基础是基于"JavaScript无法控制该HTTP头"

    它需要通过目标域返回的HTTP头来授权是否允许跨域访问。

    response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
    response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

     

    解决方式2:jsonp 只支持get请求不支持post请求

    用法:①dataType改为jsonp     ②jsonp : "jsonpCallback"————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx     ③后端获取get请求中的jsonpCallback    ④构造回调结构

    $.ajax({
    			type : "GET",
    			async : false,
    			url : "http://a.a.com/a/FromServlet?userName=644064",
    			dataType : "jsonp",//数据类型为jsonp  
    			jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
    			success : function(data) {
    				alert(data["userName"]);
    			},
    			error : function() {
    				alert('fail');
    			}
    		});
    

     

    //后端
            String jsonpCallback = request.getParameter("jsonpCallback");
    		//构造回调函数格式jsonpCallback(数据)
    		resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");

    JSONP实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用<script>标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。 Jquery中ajax的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的 js脚本。

      当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。因为jsonp 跨域的原理就是用的动态加载<script>的src ,所以我们只能把参数通过url的方式传递,所以jsonp的 type类型只能是get !

    示例:

    $.ajax({

        url: 'http://192.168.10.46/demo/test.jsp',        //不同的域

        type: 'GET',                                                        // jsonp模式只有GET 是合法的

        data: {

            'action': 'aaron'

        },

        dataType: 'jsonp',                                              // 数据类型

        jsonp: 'jsonpCallback',                                     // 指定回调函数名,与服务器端接收的一致,并回传回来

    })

    其实jquery 内部会转化成

    http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

    然后动态加载

    <script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron"></script>

    然后后端就会执行jsonpCallback(传递参数 ),把数据通过实参的形式发送出去。

      使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 jsonpCallback函数名,然后把数据通过实参的形式发送出去

     

    (在jquery 源码中, jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数,当 <script>代码插入时函数执行,执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。)

     

    解决方式3:httpClient内部转发

    实现原理很简单,若想在B站点中通过Ajax访问A站点获取结果,固然有ajax跨域问题,但在B站点中访问B站点获取结果,不存在跨域问题,这种方式实际上是在B站点中ajax请求访问B站点的HttpClient,再通过HttpClient转发请求获取A站点的数据结果。但这种方式产生了两次请求,效率低,但内部请求,抓包工具无法分析,安全。

    $.ajax({
    			type : "GET",
    			async : false,
    			url : "http://b.b.com:8080/B/FromAjaxservlet?userName=644064",
    			dataType : "json",
    			success : function(data) {
    				alert(data["userName"]);
    			},
    			error : function() {
    				alert('fail');
    			}
    		});

     

    @WebServlet("/FromAjaxservlet")
    public class FromAjaxservlet extends HttpServlet{
    	
    	
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		try {
    			//创建默认连接
    			CloseableHttpClient httpClient = HttpClients.createDefault();
    			//创建HttpGet对象,处理get请求,转发到A站点
    			HttpGet httpGet = new HttpGet("http://a.a.com:8080/A/FromServlet?userName="+req.getParameter("userName")); 
                            //执行
    			CloseableHttpResponse response = httpClient.execute(httpGet);
    			int code = response.getStatusLine().getStatusCode();
    			//获取状态
    			System.out.println("http请求结果为:"+code);
    			if(code == 200){
                                    //获取A站点返回的结果
    				String result = EntityUtils.toString(response.getEntity());
    				System.out.println(result);
                                    //把结果返回给B站点
    				resp.getWriter().print(result);
    			}
    			response.close();
    			httpClient.close();
    		} catch (Exception e) {
    		}
    	}
    }

     

    解决方式4:使用nginx搭建企业级接口网关方式

    www.a.a.com不能直接请求www.b.b.com的内容,可以通过nginx,根据同域名,但项目名不同进行区分。什么意思呢?这么说可能有点抽象。假设我们公司域名叫www.nginxtest.com

    当我们需要访问www.a.a.com通过www.nginxtest.com/A访问,并通过nginx转发到www.a.a.com

    当我们需要访问www.b.b.com通过www.nginxtest.com/B访问,并通过nginx转发到www.a.a.com

    我们访问公司的域名时,是"同源"的,只是项目名不同,此时项目名的作用只是为了区分,方便转发。如果你还不理解的话,先看看我是怎么进行配置的:

    server {
            listen       80;
            server_name  www.nginxtest.com;
            location /A {
    		    proxy_pass  http://a.a.com:81;
    			index  index.html index.htm;
            }
    		location /B {
    		    proxy_pass  http://b.b.com:81;
    			index  index.html index.htm;
            }
        }
    

    我们访问以www.nginxtest.com开头且端口为80的网址,nginx将会进行拦截匹配,若项目名为A,则分发到a.a.com:81。实际上就是通过"同源"的域名,不同的项目名进行区分,通过nginx拦截匹配,转发到对应的网址。整个过程,两次请求,第一次请求nginx服务器,第二次nginx服务器通过拦截匹配分发到对应的网址。

     

    解决方式5:使用Spring Cloud zuul接口网关

    我比较懒...

    展开全文
  • 跨域问题

    千次阅读 2012-07-10 17:32:11
    润乾报表跨域问题解决方案 跨域访问报表,可以理解为在两台不同IP段的机器上访问报表。 先简单介绍一下跨域的具体情况: A, B两台机器,分别部署了两个应用。 A机器的IP:192.168.0.41  域名:runqian1.vicp...

    润乾报表跨域问题解决方案

    跨域访问报表,可以理解为在两台不同IP段的机器上访问报表。

    先简单介绍一下跨域的具体情况:

    A, B两台机器,分别部署了两个应用。

    A机器的IP:192.168.0.41  域名:runqian1.vicp.net

    B机器的IP:192.168.0.50  域名:runqian5.vicp.net

    A机器上部署了报表应用,是服务端;B机器是客户端。

    B应用的web.xml中有如下配置:

    <context-param>

                      <param-name>reportPath</param-name>

                      <param-value>http://192.168.0.41:8081/demozj</param-value>

     </context-param>

    然后在B机器的iframe.jsp中通过iframe引入了B机器应用中的kuayu.jsp,在kuayu.jsp中通过window.location="<%=reportPath%>/reportJsp/showReport.jsp?raq=/testxlrl.raq";去访问A机器上应用中的报表

    JSP中的具体内容可见附件)

    在B机器的IE地址栏中输入:

    Http://192.168.0.50:8080/demo/reportJsp/iframe.jsp

    应用会跳转到:

    http://192.168.0.41:8081/demozj/reportJsp/showReport.jsp?raq=/testxlrl.raq

    Testxlrl.raq是个带参数模版的报表,其中有下拉数据集,下拉列表框和下拉日历。而在跨域访问报表时,所表现出来的具体问题是:下拉框和下拉日历一律不能点击,点击时无任何反应,且页面报脚本错误,提示:servlet拒绝访问。

    出现这个错误的原因是:报表的下拉控件中用到一个名为creatPopup()js方法,该方法本书是拒绝跨域访问的。

    js跨域问题,是在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考虑,几乎所有浏览器都不允许这种跨域访问。

    这并非是报表产品的问题。

    但是对于这种情况,报表目前有一种解决办法:使用document.domain=“二级域名”的方式。

    使用document.domain方法有以下几个前提:

    1. 在web.xml中只能配置域名和端口。

    即将:

            <context-param>

                      <param-name>reportPath</param-name>

                      <param-value>http://192.168.0.1:8081/demozj</param-value>

     </context-param>

             修改成:

                                                   <context-param>

                      <param-name>reportPath</param-name>

                      <param-value>http://runqian1.vicp.net:8081/demozj</param-value>

     </context-param>

     

     

    2.只能使用域名访问应用。

    3.二级域名必须一致。

    以上三个条件必须同时遵守,且不能违反任意一条。

    具体步骤如下:

    1. 统一两台服务器的二级域名(www.1.baidu.com 中baidu.com就是二级域名)

    a)  A,B两天机器的二级域名都是:vicp.net

    2. 在涉及到的所有JSP中加入一下代码:

    <scripttype="text/javascript">

    document.domain="vicp.net";

    </script>

    该例中就需要在iframe.jsp,kuayu.jsp和A机器上的showReport.jsp中都加入这句话。

    3.      使用域名加端口的方式来访问应用,如:

    http://runqian5.vicp.net:8080/demo/reportJsp/iframe.jsp

    说明一点:

    配置的端口可以不一致,但是前提是:在路由器配置端口转发的地方必须将用到的端口都包含进去。

    展开全文
  • 解决跨域问题的8种方案(最新最全)

    万次阅读 多人点赞 2019-02-18 17:47:01
    转自 PheonixHkbxoic 的《前端解决跨域问题的8种方案(最新最全)》 原址:https://www.cnblogs.com/PheonixHkbxoic/p/5760838.html 1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.js ...

    转自 PheonixHkbxoic 的《前端解决跨域问题的8种方案(最新最全)》

    原址:https://www.cnblogs.com/PheonixHkbxoic/p/5760838.html

     

    1.同源策略如下:

    URL 说明 是否允许通信
    http://www.a.com/a.js
    http://www.a.com/b.js
    同一域名下 允许
    http://www.a.com/lab/a.js
    http://www.a.com/script/b.js
    同一域名下不同文件夹 允许
    http://www.a.com:8000/a.js
    http://www.a.com/b.js
    同一域名,不同端口 不允许
    http://www.a.com/a.js
    https://www.a.com/b.js
    同一域名,不同协议 不允许
    http://www.a.com/a.js
    http://70.32.92.74/b.js
    域名和域名对应ip 不允许
    http://www.a.com/a.js
    http://script.a.com/b.js
    主域相同,子域不同 不允许
    http://www.a.com/a.js
    http://a.com/b.js
    同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
    http://www.cnblogs.com/a.js
    http://www.a.com/b.js
    不同域名 不允许

    特别注意两点:

    第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

    第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

    “URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

    2. 前端解决跨域问题

    1> document.domain + iframe      (只有在主域相同的时候才能使用该方法)

    1) 在www.a.com/a.html中:

    document.domain = 'a.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'http://www.script.a.com/b.html';
    ifr.display = none;
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;
        //在这里操作doc,也就是b.html
        ifr.onload = null;
    };

    2) 在www.script.a.com/b.html中:

    document.domain = 'a.com';

    2> 动态创建script

    这个没什么好说的,因为script标签不受同源策略的限制。

    function loadScript(url, func) {
      var head = document.head || document.getElementByTagName('head')[0];
      var script = document.createElement('script');
      script.src = url;
    
      script.onload = script.onreadystatechange = function(){
        if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
          func();
          script.onload = script.onreadystatechange = null;
        }
      };
    
      head.insertBefore(script, 0);
    }
    window.baidu = {
      sug: function(data){
        console.log(data);
      }
    }
    loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});
    //我们请求的内容在哪里?
    //我们可以在chorme调试面板的source中看到script引入的内容

    3> location.hash + iframe

    原理是利用location.hash来进行传值。

    假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。
    1) cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面
    2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据
    3) 同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一旦有变化则获取获取hash值
    注:由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe

    代码如下:
    先是a.com下的文件cs1.html文件:

     

    function startRequest(){
        var ifr = document.createElement('iframe');
        ifr.style.display = 'none';
        ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
        document.body.appendChild(ifr);
    }
    
    function checkHash() {
        try {
            var data = location.hash ? location.hash.substring(1) : '';
            if (console.log) {
                console.log('Now the data is '+data);
            }
        } catch(e) {};
    }
    setInterval(checkHash, 2000);

    cnblogs.com域名下的cs2.html:

    //模拟一个简单的参数处理操作
    switch(location.hash){
        case '#paramdo':
            callBack();
            break;
        case '#paramset':
            //do something……
            break;
    }
    
    function callBack(){
        try {
            parent.location.hash = 'somedata';
        } catch (e) {
            // ie、chrome的安全机制无法修改parent.location.hash,
            // 所以要利用一个中间的cnblogs域下的代理iframe
            var ifrproxy = document.createElement('iframe');
            ifrproxy.style.display = 'none';
            ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';    // 注意该文件在"a.com"域下
            document.body.appendChild(ifrproxy);
        }
    }

    a.com下的域名cs3.html

    //因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
    parent.parent.location.hash = self.location.hash.substring(1);

    4> window.name + iframe

    window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

    1) 创建a.com/cs1.html

    2) 创建a.com/proxy.html,并加入如下代码

    <head>
      <script>
      function proxy(url, func){
        var isFirst = true,
            ifr = document.createElement('iframe'),
            loadFunc = function(){
              if(isFirst){
                ifr.contentWindow.location = 'http://a.com/cs1.html';
                isFirst = false;
              }else{
                func(ifr.contentWindow.name);
                ifr.contentWindow.close();
                document.body.removeChild(ifr);
                ifr.src = '';
                ifr = null;
              }
            };
    
        ifr.src = url;
        ifr.style.display = 'none';
        if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);
        else ifr.onload = loadFunc;
    
        document.body.appendChild(iframe);
      }
    </script>
    </head>
    <body>
      <script>
        proxy('http://www.baidu.com/', function(data){
          console.log(data);
        });
      </script>
    </body>

    3 在b.com/cs1.html中包含:

    <script>
        window.name = '要传送的内容';
    </script>

     

    5> postMessage(HTML5中的XMLHttpRequest Level 2中的API)

    1) a.com/index.html中的代码:

    <iframe id="ifr" src="b.com/index.html"></iframe>
    <script type="text/javascript">
    window.onload = function() {
        var ifr = document.getElementById('ifr');
        var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
                                            // 若写成'http://c.com'就不会执行postMessage了
        ifr.contentWindow.postMessage('I was there!', targetOrigin);
    };
    </script>

    2) b.com/index.html中的代码:

    <script type="text/javascript">
        window.addEventListener('message', function(event){
            // 通过origin属性判断消息来源地址
            if (event.origin == 'http://a.com') {
                alert(event.data);    // 弹出"I was there!"
                alert(event.source);  // 对a.com、index.html中window对象的引用
                                      // 但由于同源策略,这里event.source不可以访问window对象
            }
        }, false);
    </script>

    6> CORS

    CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。

    IE中对CORS的实现是xdr

    var xdr = new XDomainRequest();
    xdr.onload = function(){
        console.log(xdr.responseText);
    }
    xdr.open('get', 'http://www.baidu.com');
    ......
    xdr.send(null);

    其它浏览器中的实现就在xhr中

    var xhr =  new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
                console.log(xhr.responseText);
            }
        }
    }
    xhr.open('get', 'http://www.baidu.com');
    ......
    xhr.send(null);

    实现跨浏览器的CORS

    function createCORS(method, url){
        var xhr = new XMLHttpRequest();
        if('withCredentials' in xhr){
            xhr.open(method, url, true);
        }else if(typeof XDomainRequest != 'undefined'){
            var xhr = new XDomainRequest();
            xhr.open(method, url);
        }else{
            xhr = null;
        }
        return xhr;
    }
    var request = createCORS('get', 'http://www.baidu.com');
    if(request){
        request.onload = function(){
            ......
        };
        request.send();
    }

    7> JSONP

    JSONP包含两部分:回调函数和数据。

    回调函数是当响应到来时要放在当前页面被调用的函数。

    数据就是传入回调函数中的json数据,也就是回调函数的参数了。

    function handleResponse(response){
        console.log('The responsed data is: '+response.data);
    }
    var script = document.createElement('script');
    script.src = 'http://www.baidu.com/json/?callback=handleResponse';
    document.body.insertBefore(script, document.body.firstChild);
    /*handleResonse({"data": "zhe"})*/
    //原理如下:
    //当我们通过script标签请求时
    //后台就会根据相应的参数(json,handleResponse)
    //来生成相应的json数据(handleResponse({"data": "zhe"}))
    //最后这个返回的json数据(代码)就会被放在当前js文件中被执行
    //至此跨域通信完成

     jsonp虽然很简单,但是有如下缺点:

    1)安全问题(请求代码中可能存在安全隐患)

    2)要确定jsonp请求是否失败并不容易

    8> web sockets

    web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

    web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

    只有在支持web socket协议的服务器上才能正常工作。

    var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
    socket.send('hello WebSockt');
    socket.onmessage = function(event){
        var data = event.data;
    }
    展开全文
  • 前端解决跨域问题

    万次阅读 多人点赞 2019-05-12 15:48:54
    浏览器跨域问题是源于浏览器的同源策略,,协议,域名,端口,三者有其中一个不一致就属于跨域。 URL网址的组成: http://www.baidu.com:80/index.html?username=xxx&password=yyy#hash 协议://域名:端口 / ...
  • Vue之Axios跨域问题解决方案

    万次阅读 多人点赞 2019-02-19 14:32:31
    背景:因为axios中只能使用get和post方法来进行请求数据,没有提供jsonp等方法进行跨域访问数据 axios中文网址:https://www.kancloud.cn/yunye/axios/234845 // axios 中的GET请求 axios.get('/user', { ...
  • 什么是跨域?怎么解决跨域问题

    万次阅读 多人点赞 2016-06-15 17:32:16
    什么是跨域跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 所谓同源是指,域名,协议,端口均相同,不明白没关系,举个栗子: ...
  • ajax跨域问题

    万次阅读 2018-06-07 00:18:44
    什么事ajax跨域问题 跨域问题来自于浏览器同源策略的限制,包括DOM同源限制和ajax同源限制,本文探讨的是ajax跨域。ajax跨域指的是一个页面的ajax只能请求和当前页面同源的数据,如果发现请求到的数据不符合...
  • jsonp 跨域问题: 手机端存在跨域问题么?是只有网页才会涉及到跨域问题么?
  • axios解决跨域问题

    万次阅读 多人点赞 2018-10-10 17:44:34
    最近把我自己的网站升级生成前后端分离的项目(vue+springBoot),不可避免的就遇到了跨域问题。从中学到了许多知识,随便分享出来,也巩固下所学。  谈到跨域,首先得了解CORS(Cross origin resource sharing) ...
  • 前后端分离项目,如何解决跨域问题 跨域资源共享(CORS)是前后端分离项目很常见的问题,本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。 什么是跨域问题 CORS全称Cross-Origin Resource ...
  • 什么是跨域?如何解决跨域问题

    万次阅读 多人点赞 2017-07-31 20:29:48
    什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 域名: 主域名不同 http://www.baidu.com/index.html –&amp;gt;http://www.sina.com/test.js 子域名...
  • vue 跨域问题

    千次阅读 2020-07-25 23:02:33
    前端请求经常会遇到跨域问题,那么 vue 中怎么解决这个问题呢?
  • 如今的这个生态圈百花齐放,前后分离开始热门起来了,...简述跨域问题 SpringBoot跨域请求 1、直接采用SpringBoot的注解@CrossOrigin 2、处理跨域请求的Configuration CrossOriginConfig.java import org.springfr...
  • 跨域问题(CORS / Access-Control-Allow-Origin)

    万次阅读 多人点赞 2018-11-24 23:11:50
    最近在项目中,调用Eureka REST接口时,出现了CORS跨越问题(Cross-origin resource sharing),在此与大家进行分享,避免多走些弯路。 项目前端(http://localhost:9000)通过Ajax方式调用Eureka REST 接口...
  • Ionic4 开发跨域问题 及打包跨域问题 解决方案汇总

    千次阅读 热门讨论 2019-11-29 16:43:06
    1,开发中跨域问题 开发阶段,项目中遇到跨域问题,解决方式也基本是两种 1,pc 端支持跨域调用,或者支持 jsonp调用 2,配置代理 ,网上各种资料的配置基本全是错误的 正确的方式是:1,首先新建一个 proxy....
  • Axios是不允许跨域访问的,别说跨域,跨端口都不行。例如某项目我本地vue前端frontEnd为`localhost:8888`,Java后台 backEnd为`localhost:8889` 。 这个时候就有两个方案了: - 修改`frontEnd`前端,支持跨域(通过...
  • vue解决跨域问题-谷歌跨域问题

    千次阅读 2018-06-18 22:14:01
    //解决跨域问题 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" 空格 添加 --args --disable-web-security --user-data-dir &lt;template&gt; &lt;div id="Table&...
  • 彻底解决跨域问题(五种解决跨域的方式)

    万次阅读 多人点赞 2018-08-22 16:43:11
    跨域问题解决方案 最近自己写了一个js组件,该js组件是提供给第三方使用的,而js组件中涉及了ajax请求,于是乎就出现了跨域请求问题。下面记录一下自己的解决路程。 什么是跨域 参考:跨域请求详解 个人理解...
  • nginx解决跨域问题

    千次阅读 2020-12-29 10:57:26
    在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题. 跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题 首先,在我们开始之前,首先要知道跨域是如何...
  • Go | Gin 解决跨域问题跨域配置
  • 如何解决跨域问题

    千次阅读 2020-08-11 08:03:54
    1.什么叫跨域问题 浏览器使用ajax时如果请求了的接口地址和当前打开的页面地址不同源称之为跨域 (1) ajax :浏览器只有使用ajax发送请求才会出现跨域。href属性 与src属性不会出现跨域 (2) 接口地址: ajax请求的url ...
  • jeecg跨域问题

    千次阅读 2020-01-14 14:51:24
    jeecg跨域问题404问题302问题 404问题 解决方法:在方法体中插入以下代码 response.setHeader("Access-Control-Allow-Origin", "*"); response.setContentType("application/json"); response.setHeader("Cache-...
  • IONIC跨域问题

    千次阅读 2016-04-27 16:01:43
    IONIC跨域问题
  • CORS解决跨域问题(Nginx跨域配置)

    万次阅读 2019-04-29 21:46:10
    浏览器上,我们访问127.0.0.1:80,但是127.0.0.1:80 会去请求127.0.0.1:81的数据(比如js文件,ajax请求等),此时80访问81会出现跨域问题,但我们浏览器能直接访问81的数据。 注意: 跨域不是请求发不出去,...
  • 解决跨域问题!Nginx代理与Vue-cli代理处理跨域问题前言业务场景两种跨域解决方法解决原理Ngnix代理vue-cli写在最后 前言 我是一个java后端程序员,之前解决跨域都是在后端写一个过滤器,给HttpRequest的header添加...
  • SpringBoot解决跨域问题

    千次阅读 2020-08-10 13:18:56
    前后端分离是目前的趋势, 解决跨域问题也是老生常谈的话题了,我们了解一下什么是域和跨域。 域:协议 + 域名 + 端口;三者完全相同则为同域,反之有其一不同均为不同域。 跨域请求:当前【发起请求】的域和...
  • CORS跨域问题

    万次阅读 2017-11-28 16:30:07
    之前做过一个APP遇到过跨域问题,之后来到公司采用前后端分离,也涉及到跨域问题。那么记录一下自己学习的过程。做个笔记。建议详细阅读阮一峰博客:http://www.ruanyifeng.com/blog/2016/04/cors.html CORS(cross-...
  • 什么是跨域及怎么解决跨域问题

    万次阅读 多人点赞 2018-12-07 11:36:04
    什么是跨域? 这篇博文解释的挺清楚,我直接引用https://blog.csdn.net/lambert310/article/details/51683775 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,400
精华内容 15,360
关键字:

跨域问题