同源策略

  • 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.js

abc(  
    {name: 'zhangsan'}  
)

前端使用 jsonp 跨域

<script>  
    window.abc = function(data){  
        console.log(data) // {name: "zhangsan"}  
    }  
</script>  
<script src="http://test.com/test/jsonp.js"></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");

标签: none

添加新评论