跨域

---

目录

• 一、同源策略
  • 什么是同源策略
  • 不受同源策略约束的场景
• 二、跨域
  • JSONP
    • 定义
    • 前提
    • 实现一 （原生）
    • 实现二 （jQuery）
    • 参考
  • CROS
    • 实现
    • 参考
  • 代理服务器
  • 注意

一、同源策略

什么是同源策略

出于安全考虑，浏览器要求：ajax请求的 协议、域名、端口，必须与当前页面的一致。
它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

不受同源策略约束的场景

<img src="跨域的图片地址" />
<link href="跨域的CSS地址" />
<script src="跨域的JS地址"></script>
<!-- ↓ 应用 -->
<!-- 
	img 可以使用第三方服务，统计打点；
	link、script 可以使用CDN；
	script 可以实现JSONP；
-->

二、跨域

JSONP

图片来源：当轩 - 知乎

定义

Jsonp(JSON with Padding) 既返回json数据的包装，是 json 的一种"使用模式"，为了实现跨域读取数据。
实现方式：前端定义函数，然后通过<script>标签请求后端，后端返回这个函数的调用，并且将需要给前端的数据，作为该函数的参数。

前提

1. <script>标签不受浏览器的同源策略限制；
2. 访问一个url，可以返回任意动态拼接的数据, 而不一定是一个文件；

实现一 （原生）

<script>
    window.callback = funcion(data) => {
        console.log(data)
    }
</script>
<script src="https://api.server.com/getData.js"></script>
<!-- 
// getData.js
callback('helloWorld')
-->

<!-- 说明： 实际使用中，函数名及参数可以动态的传递给后端（https://api.server.com/getData.js?fucname=xxx&param=xxx) -->

实现二 （jQuery）

$.ajax({
    url: 'http://xxx.yyy/aaa.js',
    dataType: 'jsonp',
    jsonpCallback: 'callback', // 自定义回调函数名称，默认为jQuery生成随机名
    success: function(data) {
        console.log(data);
    },
    error: function() {
        console.log('fail');
    }
})

参考

https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

CROS

实现

服务端设置 HTTP Header

response.setHeader("Access-Control-Allow-Origin", "http://www.xyz.com:8000"); // 允许跨域的域名，不建议写 "*"
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,OPTIONS,DELETE");

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

服务端配置好CROS后，前端不需要特别设置，直接请求就可以。

参考

http://www.ruanyifeng.com/blog/2016/04/cors.html

代理服务器

• 前端设置代理（仅开发阶段调试用）
• 后端部署代理服务器

注意

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