zoukankan      html  css  js  c++  java
  • Firebug: 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-

    第一种,就是在被请求的程序中添加HTTP头,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing)

    如: Response.Headers.Add("Access-Control-Allow-Origin", "*");
    // JSON
    {
      'Access-Control-Allow-Origin': '*', 
    }
    // HTML
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    // PHP
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

      添加此段代码的目的很简单,也就是告诉浏览器,这个资源是运行远程所有域名访问的。当然,此处的也可以替换为指定的域名,出于安全考虑,建议将替换成指定的域名。 
      由于IE10以下浏览器不支持CORS,所以目前在国内CORS并不是主流的跨域解决方案,但是随着windows 10的发布,IE的逐渐衰落,可以预见,在不远的将来CORS将成为跨域的标准解决方案。

    第二种,就是在被请求的服务器上,添加HTTP响应头。在这里,我们就以IIS6.0为例:

    //在被请求的网站上,设置HTTP头,添加
    "Access-Control-Allow-Origin:*" //值为*或指定的域名。

    第三种,就是在被请求的服务器上在被请求的项目根目录(root下)下放以下文件 : 
    crossdomain.xml

        <?xml version="1.0"?>    
        <!DOCTYPE cross-domain-policy SYSTEM "./cross-domain-policy.dtd">    
        <cross-domain-policy> <site-control permitted-cross-domain-policies="all" />    
            <allow-access-from domain="*" />    
            <allow-http-request-headers-from domain="*" headers="*"/>    
        </cross-domain-policy>    

    cross-domain-policy.dtd

        <?xml version="1.0" encoding="ISO-8859-1"?>    
        <!-- Adobe DTD for cross-domain policy files -->    
        <!-- Copyright (c) 2008-2009, Adobe Systems Inc. -->    
    
        <!ELEMENT cross-domain-policy (site-control?,allow-access-from*,allow-http-request-headers-from*,allow-access-from-identity*)>    
    
        <!ELEMENT site-control EMPTY>    
        <!ATTLIST site-control permitted-cross-domain-policies (all|by-content-type|by-ftp-filename|master-only|none) #REQUIRED>    
    
        <!ELEMENT allow-access-from EMPTY>    
        <!ATTLIST allow-access-from domain CDATA #REQUIRED>    
        <!ATTLIST allow-access-from to-ports CDATA #IMPLIED>    
        <!ATTLIST allow-access-from secure (true|false) "true">    
    
        <!ELEMENT allow-http-request-headers-from EMPTY>    
        <!ATTLIST allow-http-request-headers-from domain CDATA #REQUIRED>    
        <!ATTLIST allow-http-request-headers-from headers CDATA #REQUIRED>    
        <!ATTLIST allow-http-request-headers-from secure (true|false) "true">    
    
        <!ELEMENT allow-access-from-identity (signatory)>    
    
        <!ELEMENT signatory (certificate)>    
    
        <!ELEMENT certificate EMPTY>    
        <!ATTLIST certificate fingerprint CDATA #REQUIRED>    
        <!ATTLIST certificate fingerprint-algorithm CDATA #REQUIRED>    
    
        <!-- End of file. -->    

    第四种,使用JSONP格式 
    即在jQuery中ajax请求参数dataType:’JSONP’:

    <script> 
        $.ajax({ 
            url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228", 
            type:'GET', 
            dataType:'JSONP',  // 处理Ajax跨域问题
            success: function(data){ 
                $('body').append( "Name: " + data ); 
            } 
        }); 
    </script>

    或者:

        <script type="text/javascript">    
            function jsonpCallback(result){     
               alert(result[1].name);     
            }     
        </script>  
        <script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>  

    或者jquery代码:

        <script type="text/javascript">     
            $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){      
                alert(json[0].name);     
            });     
         </script>  

    后台jsonp.jsp代码:

        <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        <%  
             String callback = request.getParameter("callback");  
             out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");  
             out.print(callback);  
        %>  

    或者servlet

    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/Jsonp")
    public class Jsonp extends HttpServlet {
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
         */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String jsonp=request.getParameter("jsonpcallback");  
            response.setContentType("text/html;charset=UTF-8");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out = response.getWriter();
            out.write(jsonp + "0;null");
            out.close();
        }
    
        @Override
        public void init(ServletConfig config) throws ServletException {
            super.init(config);
        }
    }
    

    ajax请求的参数:jsonp

    类型:String 
    在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分,比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。

    ajax请求的参数:jsonpCallback

    类型:String 
    为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

    注意内容: 
      1、Ajax请求需要设置请求类型为Jsonp 
      dataType: “jsonp”

      2、Ajax请求需要设置回调函数,当前函数值必须与服务器响应包含的callback名称相同 
      jsonpCallback:”fn”

      3、Ajax请求可以设置jsonp(可选),传递给请求处理程序或页面,用以获得jsonp回调函数名的参数名,默认为:callback 
      jsonp: “callback”

      4、服务端返回Json数据必须使用jsonpCallback设置的值进行包裹 
      return “fn(“+JsonUtil.objectToJson(outPut)+”)” 
       
    第五种,使用Html5中新引进的window.postMessage方法来跨域传送数据

    CORS与JSONP相比,更为先进、方便和可靠。

      1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。 
       
      2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。 
       
      3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。 
       
      对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。 
      服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。 
      Header set Access-Control-Allow-Origin * 
      为了防止XSS攻击我们的服务器, 我们可以限制域,比如: Access-Control-Allow-Origin: http://blog.csdn.net 
      很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。

    上线后最好把 Access-Control-Allow-Origin: * 的 * 改为允许访问的特定域名

    header('Access-Control-Allow-Origin:*');
    header('Access-Control-Allow-Methods:HEAD,GET,POST,OPTIONS,PATCH,PUT,DELETE');
    header('Access-Control-Allow-Headers:Origin,X-Requested-With,Authorization,Content-Type,Accept,Z-Key')

    转自:https://blog.csdn.net/xlxxcc/article/details/54588571

  • 相关阅读:
    Python学习日志(三)
    Python学习日志(二)
    软件测试入门随笔——软件测试基础知识(八)
    软件测试入门随笔——软件测试基础知识(七)
    软件测试入门随笔——软件测试基础知识(六)
    fastcgi 性能初配 504 gateway time-out
    php 文件锁
    php sleep()的实时输出打印,清除ob缓冲区
    php用simplexml来操作xml
    PHP防SQL注入不要再用addslashes和mysql_real_escape_string
  • 原文地址:https://www.cnblogs.com/mhxsh/p/8651522.html
Copyright © 2011-2022 走看看