浏览器的同源策略

浏览器的同源策略

• ajax请求时，浏览器要求当前网页和server必须同源（安全）

• 同源：协议，域名，端口，三者必须一致

  例：

  ​ client：http://taobao.com:8080 server：https://alibaba.com:443/api/

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

• <link rel="stylesheet" href="">可使用CDN，CDN一般都是外域
• <script src=""></script>可实现JSONP
• <img src="">可用于统计打点，可使用第三方统计服务

跨域

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

CORS - 服务端设置http header

// 第二个参数填写允许跨域的域名称，不建议直接写“*”
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8011");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-Width");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true")

其他的跨域方式，请参考我博客中的 仿小米商城里面的前端跨域解决方案