跨域的常用实现方式

同源策略

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等代理

跨域的常用实现方式 ​

跨域的常用实现方式