方式:
一 是通过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>
浏览器支持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);
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>