> 題目：如何實現跨域？ 瀏覽器中有**同源策略**，即一個域下的頁面中，無法通過 Ajax 獲取到其他域的接口。例如有一個接口`http://m.juejin.com/course/ajaxcourserecom?cid=459`，你自己的一個頁面`http://www.yourname.com/page1.html`中的 Ajax 無法獲取這個接口。這正是命中了“同源策略”。如果瀏覽器哪些地方忽略了同源策略，那就是瀏覽器的安全漏洞，需要緊急修復。 url 哪些地方不同算作跨域？ * 協議 * 域名 * 端口 但是 HTML 中幾個標簽能逃避過同源策略——`<script src="xxx">`、`<img src="xxxx"/>`、`<link href="xxxx">`，這三個標簽的`src/href`可以加載其他域的資源，不受同源策略限制。 因此，這使得這三個標簽可以做一些特殊的事情。 * `<img>`可以做打點統計，因為統計方并不一定是同域的，在講解 JS 基礎知識異步的時候有過代碼示例。除了能跨域之外，`<img>`幾乎沒有瀏覽器兼容問題，它是一個非常古老的標簽。 * `<script>`和`<link>`可以使用 CDN，CDN 基本都是其他域的鏈接。 * 另外`<script>`還可以實現 JSONP，能獲取其他域接口的信息，接下來馬上講解。 但是請注意，所有的跨域請求方式，最終都需要信息提供方來做出相應的支持和改動，也就是要經過信息提供方的同意才行，否則接收方是無法得到它們的信息的，瀏覽器是不允許的。 ### 解決跨域 - JSONP 首先，有一個概念你要明白，例如訪問`http://coding.m.juejin.com/classindex.html`的時候，服務器端就一定有一個`classindex.html`文件嗎？—— 不一定，服務器可以拿到這個請求，動態生成一個文件，然后返回。 同理，`<script src="http://coding.m.juejin.com/api.js">`也不一定加載一個服務器端的靜態文件，服務器也可以動態生成文件并返回。OK，接下來正式開始。 例如我們的網站和掘金網，肯定不是一個域。我們需要掘金網提供一個接口，供我們來獲取。首先，我們在自己的頁面這樣定義 ~~~ <script> window.callback = function (data) { // 這是我們跨域得到信息 console.log(data) } </script> ~~~ 然后掘金網給我提供了一個`http://coding.m.juejin.com/api.js`，內容如下（之前說過，服務器可動態生成內容） ~~~ callback({x:100, y:200}) ~~~ 最后我們在頁面中加入`<script src="http://coding.m.juejin.com/api.js"></script>`，那么這個js加載之后，就會執行內容，我們就得到內容了。 ### 解決跨域 - 服務器端設置 http header 這是需要在服務器端設置的，作為前端工程師我們不用詳細掌握，但是要知道有這么個解決方案。而且，現在推崇的跨域解決方案是這一種，比 JSONP 簡單許多。 ~~~ response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/"); // 第二個參數填寫允許跨域的域名稱，不建議直接寫 "*" response.setHeader("Access-Control-Allow-Headers", "X-Requested-With"); response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 接收跨域的cookie response.setHeader("Access-Control-Allow-Credentials", "true"); ~~~