• 跨域


    方式:

    一 是通过Flash插件发送HTTP请求,这种方式可以绕过浏览器的安全限制,但必须安装Flash,并且跟Flash交互。不过Flash用起来麻烦,而且现在用得也越来越少了。

    二 是通过在同源域名下架设一个代理服务器来转发,JavaScript负责把请求发送到代理服务器:

    '/proxy?url=http://www.sina.com.cn'

    代理服务器再把结果返回,这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。

    三  JSONP,它有个限制,只能用GET请求,并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源:

    <script src="http://example.com/abc.js"></script>

    JSONP通常以函数调用的形式返回,例如,返回JavaScript内容如下:foo('data');
    如果在页面中先准备好foo()函数,然后给页面动态加一个<script>节点,相当于动态读取外域的JavaScript资源,最后就等着接收回调了。
    <html>
    
    <head>
        <meta charset='utf-8' />
    </head>
    <script>
        // refreshPrice 对应就好
    function refreshPrice(data){
        var p=document.getElementById("test-jsonp");
        p.innerHTML="当前价格:"+
        data['0000001'].name+':'+data['0000001'].price
    }
    
    function getPrice(){    
        var price=document.createElement('script');
        var head=document.getElementsByTagName("head")[0];
        price.src= 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
        head.appendChild(price);
    }
    </script>
    
    
    <body>
        <p id="test-jsonp">here</p>
        <button type='button' onclick='getPrice()'>refresh</button>
    </body>
    
    </html>
     

    四 CORS

    浏览器支持HTML5(IE10+),那么就可以一劳永逸地使用新的跨域策略:CORS了。

    CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。

    假设本域是my.com,外域是sina.com,只要响应头Access-Control-Allow-Originhttp://my.com,或者是*,本次请求就可以成功。

    =》获取跨域 cookie

    header('Access-Control-Allow-Credentials:true')

    可见,跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin,决定权始终在对方手中。

    扩展:

    no-referrer-when-downgrade:
    仅当发生协议降级(如 HTTPS 页面引入 HTTP 资源,从 HTTPS 页面跳到 HTTP 等)时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的;
    在页面引入图片、JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求,
    浏览器一般都会给这些请求头加上表示来源的 Referrer 字段。Referrer 在分析用户来源时很有用,有着广泛的使用。
    但 URL 可能包含用户敏感信息,如果被第三方网站拿到很不安全。

    -》node  

    http-proxy-middleware 代理转发 接口

    node

    var express = require('express');
    var proxy = require('http-proxy-middleware');
    
    var app = express();
    
    var allowCors = function (req, res, next) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
        res.header('Access-Control-Allow-Credentials', 'true');
        next();
    };
    app.use(allowCors); //使用跨域中间件
    
    // app.use(
    //     '/',
    //     proxy({
    //         target: 'https://www.v2ex.com/',
    //         changeOrigin: true
    //     })
    // );
    
    app.use(
        '/',
        proxy({
            target: 'https://c.y.qq.com/',
            changeOrigin: true
        })
    );
    
    app.listen(3000);
    View Code

    html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $.ajax({
                // url:'http://localhost:3000/api/site/info.json',    
                url:'http://localhost:3000/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=h5&needNewCode=1&tpl=3&page=detail&type=top&topid=36',
                success:function(data){
                    console.log(data);
                },
                error:function(err){
                    console.log(err);
                }
            })
        </script>
    </body>
    
    </html>
    View Code



  • 相关阅读:
    ng-class中的if else判断
    Sass 的使用
    pre 标签的使用
    C++操作 SQL数据库 实例 代码步骤
    自己写的一个操作Mysql的简单的实例
    C++ 链接Mysql 函数介绍
    Mysql 操作命令 详解
    MFC程序开始的执行过程详述
    Java各种日期格式的获取和设置指定日期
    DM8168 OpenCV尝试与评估(编译ARM版OpenCV)
  • 原文地址:https://www.cnblogs.com/justSmile2/p/9720292.html
Copyright © 2020-2023  润新知