跨域

方式：

一是通过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-Origin为http://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