前端人員都懂的瀏覽器的同源策略，以及如何進行不同源間的相互訪問
引言
作為前端開發人員，你要是連同源策略都不知道是什麼，那就太說不過去了。本篇文章將講述同源策略的定義， 以及當我們需要克服同源策略，如何進行跨域訪問資料的方法。
正文
一、同源策略的定義
「同源策略」
： 瀏覽器自帶的一種安全策略，他是指
協議
、
域名
、
埠
三個都相同的才能互相訪問，即若協議、域名、埠有一個不相同時，瀏覽器禁止頁面載入或執行與自身不同域的指令碼。
那既然有同源的概念，那必定有不同源的概念，接下來我們來看一個組例子， 理解一下什麼是同源，什麼是不同源。
url
是否同源（以及原因）
http：//www。
example。com：80
該 url 與下列的 url 比較
http：//www。
example。com：80/index。ht
ml
同源（協議、域名、埠都相同）
http：//www。
example。com：5000
不同源（埠不同）
https：//www。
example。com：80
不同源（協議不同）
http：//www。
each。com：80
不同源（域名不同）
為什麼瀏覽器會有同源策略？ 因為如果沒有同源策略，別人就可以輕鬆的獲取我們網站的 cookie 資訊， 或是對網頁進行DOM操作， 要知道這都是非常恐怖的， 尤其是 cookie 資訊， 它裡面存在著 sessionID ，這是與服務端的 session 會話的重要憑證， 要是被別人得到了 cookie ， 可能會造成資料被盜取等後果。
二、同源策略的應用
上面瞭解了同源策略的定義，但是那還是挺抽象的，那我們接下來來看一下實戰中的同源策略是什麼樣的，藉此來更深刻的理解一下同源策略的定義。
我們的主體網址是：
http：//localhost：5000/
「請求與自身同域的指令碼檔案」
我們透過jquery的 ajax 來請求 http：//localhost：5000/ 下的 data。js 指令碼檔案
<！
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
title
>
Title
<
/title>
<
/head>
<
body
>
<
script
src
=
“https：//code。jquery。com/jquery-3。5。1。min。js”
><
/script>
<
script
>
$
。
ajax
（{
url
：
‘http：//localhost：5000/data。js’
，
type
：
‘get’
}）
。
done
（
data
=>
{
console
。
log
（
data
）
}）
<
/script>
<
/body>
<
/html>
因為
http：//localhost：5000/data。js
與
http：//localhost：5000/
是同源的，所以成功請求到了 data。js 指令碼檔案中的資料， 瀏覽器也沒有報錯。
「請求與自身不同域的指令碼檔案」
我們透過jquery的 ajax 來請求
http：//www。
example。com：5000/
下的 data。js 指令碼檔案
<！
DOCTYPE
html
>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
>
<
title
>
Title
<
/title>
<
/head>
<
body
>
<
script
src
=
“https：//code。jquery。com/jquery-3。5。1。min。js”
><
/script>
<
script
>
$
。
ajax
（{
url
：
‘http：//www。example。com：5000/data。js’
，
type
：
‘get’
}）
。
done
（
data
=>
{
console
。
log
（
data
）
}）
<
/script>
<
/body>
<
/html>
因為
http：//www。example：5000/data。js
與
http：//localhost：5000/
是不同源的，所以瀏覽器會報出以下錯誤：
這個錯誤大致的意思就是說因為瀏覽器的同源策略，無法透過該域的網址去訪問別的域下的指令碼檔案， 這就是瀏覽器同源策略起到的作用。
想必大家已經對同源策略有了一定的瞭解了。那麼如果我們有時真的要去訪問別的域下的指令碼檔案，但因為瀏覽器存在同源策略，那我們該怎麼辦呢？繼續往下看， 看看如何解決這一問題。
三、實現不同域的指令碼檔案訪問
實現不同域的指令碼檔案訪問的方法有很多種，以下舉幾個例子：
透過html幾個特殊的標籤進行訪問
透過jsonp來實現跨域請求
透過CORS（跨域資源共享）實現跨域請求
透過代理實現跨域請求（例如nginx 、node中介軟體）
（1）透過html幾個特殊的標籤進行訪問
其實在 html 裡有幾個標籤是存在
src
屬性的，例如
