跨域的常用实现方式

同源策略

• ajax 请求时，浏览器要求当前网页和 sever 必须同源（安全）
• 同源：协议，域名，端口，三者必须一致
• 不同源，前端：http://a.com:8080/；server：https://b.com/api/xxx

加载图片 css js 可无视同源策略

• 图片可能防盗链
• 可用于统计打点，可使用第三方统计服务
• <link /> <script /> 可以使用 CDN，CDN 一般都是外域
• <script /> 可实现 JSONP

跨域

• 所有的跨域，都必须经过 sever 端允许和配合
• 未经 server 端允许就实现跨域，说明浏览器有漏洞，危险信号

JSONP 跨域方式

• <script /> 可绕过跨域限制
• 服务器可以任意动态拼接数据返回
• 所以，<script /> 就可以获得跨域的数据，只要服务器愿意返回

演示，准备一个 http://test.com/test/jsonp.php：

echo $_GET['callback'].'({name: "zhangsan"})';

前端使用 jsonp 跨域

<script>
    window.abc = function(data){
        console.log(data) // {name: "zhangsan"}
    }
</script>
<script src="http://test.com/test/jsonp.php?callback=bac"></script>

CORS - 服务器设置 http header 跨域

// 允许所有网站跨域访问，一般不建议直接写“*”
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Expose-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
// 接收跨域的 cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

代理 - 比如使用 Nginx，webpack等代理