前端跨域請求及解決方案
一、總結
一句話總結：
跨域請求是當前發起請求的域（協議、域名、端口）與該請求指向的資源所在的域不一致，常見的解決方式有 JSONP、跨域資源共享CORS、反向代理等
1、JSONP
2、跨域資源共享CORS（Cross-Origin Resource Sharing）
3、反向代理（最常用）
1、html中的請求標簽？
在前端開發編碼過程中，常見的html標簽例如：**a**、**form**、**mg**、**script**、**ink**、**iframe**以及Ajax操作都可以指向一個資源地址或者說可以發起對一個資源的請求
2、什么是跨域請求？
跨域請求：當前發起請求的域與該請求指向的資源所在的域不一致（這里所有的域是協議、域名和端口號的合集，同域就是所協議、域名和端口號均相同，任何一個不同都是跨域）。
3、同源策略的作用？
同源策略是用來防御來自非法的攻擊，但我們不能因為防御非法的攻擊就將所有的跨域都攔截掉。
4、跨域請求為什么會出現在前端開發中？
a、調用第三方接口：在現代前端開發中，我們經常需要調用第三方的服務接口（例如 mock server、fake api），隨着專業化分工的出現有很多專業的信息服務提供商為前端開發者提供各類接口，這種情況下就需要進行跨域請求（這類前端接口服務很多是采用的cors方式來解決跨域問題的，下文會詳細介紹）。
b、前后端分離項目：還有一類情況是在前后端分離的項目中，前端后端分屬於不同的服務跨域問題在采用這種架構的時候就存在。而且現在很多項目都采用這種前后分離的方式，這類項目很多是會采用反向代理的方式來解決跨域問題。
5、常見的跨域請求解決方案？
1、JSONP
2、跨域資源共享CORS（Cross-Origin Resource Sharing）
3、反向代理
6、jsonp 解決跨域？
a、JSONP（JSON with Padding）是JSON的一種使用模式，可用於解決主流瀏覽器的跨域數據訪問問題，在早兩三年前端解決跨域問題中經常出現這類解決方案。
b、JSONP的原理就是，Ajax存在跨域安全問題，但是script標簽是不存在這類問題的。
7、jsonp 解決跨域 代碼實例？
php端拼接js函數調用：php通過參數獲取回調函數的名字，然后函數名和要返回的數據一起拼接成函數調用
8、CORS ：跨域資源共享CORS（Cross-Origin Resource Sharing）？
1、【新增的一組HTTP首部字段允許服務器其聲明哪些來源請求有權限訪問哪些資源】：CORS是一個新的W3C標准，它新增的一組HTTP首部字段允許服務器其聲明哪些來源請求有權限訪問哪些資源，換言之它允許瀏覽器向其聲明了CORS的站進行跨域請求。
2、【在響應的HTTP首部增加Access-Control-Allow-Origin等信息】：這種方式最主要的特點就是會在響應的HTTP首部增加Access-Control-Allow-Origin等信息，從而判定哪些資源站可以進行跨域請求，還有幾個其他相關的HTTP首部進行更加精細化的控制，最主要的還是Access-Control-Allow-Origin。
9、Access-Control-Allow-Origin字段？
cors這種跨域方式最主要的特點就是會在響應的HTTP首部增加Access-Control-Allow-Origin等信息，從而判定哪些資源站可以進行跨域請求，還有幾個其他相關的HTTP首部進行更加精細化的控制，最主要的還是Access-Control-Allow-Origin。
10、CORS與JSONP 跨域對比？
*、JSONP只支持GET方式局限性很多，而且JSONP並不符合處理業務的正常流程。
*、采用CORS的方式，前端編碼與正常非跨域請求沒有什么不同。在目前很多的Fake API（模擬接口服務）、Mock Server（數據模擬服務）以及其他公共服務上都很多采用CORS的方式來解決跨域問題，例如json-server等。
11、反向代理 解決跨域？
-、【不跨域，轉發請求】：既然不能跨域請求，那么我們不跨域就可以了。通過在請求到達服務前部署一個服務，將接口請求進行轉發，這就是反向代理。通過一定的轉發規則可以將前端的請求轉發到其他的服務。
-、【反向代理統一前后端】：通過反向代理我們將前端后端項目統一通過反向代理來提供對外的服務，這樣在前端看上去就跟不存在跨域一樣。
-、【前后端分離項目主流】：反向代理麻煩之處就在原對Nginx等反向代理服務的配置，在目前前后端分離的項目中很多都是采用這種方式。
12、跨域方法總結？
CORS和反向代理是目前使用最多的解決方案，這兩個解決方案使用的場景並不相同，我們要根據自身的需求進行選擇。公共服務、Fake APl、Mock Server一般采用CORS的方案；而公司前后端分離的項目中更多是采用反向代理的方案。
二、前端跨域請求及解決方案
博客對應課程的視頻位置：
1、什么是跨域請求
·在前端開發編碼過程中，常見的html標簽例如：**a**、**form**、**mg**、**script**、**ink**、**iframe**以及Ajax操作都可以指向一個資源地址或者說可以發起對一個資源的請求，那么這里所說的請求就存在同域請求還是跨域請求。
·所謂跨域請求就是指：當前發起請求的域與該請求指向的資源所在的域不一致（這里所有的域是協議、域名和端口號的合集，同域就是所協議、域名和端口號均相同，任何一個不同都是跨域）。
2、跨域請求為什么會出現在前端開發中？
既然同源策略是瀏覽器的核心基礎安全策略，那為什么我們在進行前端開發特別是Aiax調用時還要進行跨域請求呢？同源策略是用來防御來自非法的攻擊，但我們不能因為防御非法的攻擊就將所有的跨域都攔截掉。
在現代前端開發中，我們經常需要調用第三方的服務接口（例如 mock server、fake api），隨着專業化分工的出現有很多專業的信息服務提供商為前端開發者提供各類接口，這種情況下就需要進行跨域請求（這類前端接口服務很多是采用的cors方式來解決跨域問題的，下文會詳細介紹）。
還有一類情況是在前后端分離的項目中，前端后端分屬於不同的服務跨域問題在采用這種架構的時候就存在。而且現在很多項目都采用這種前后分離的方式，這類項目很多是會采用反向代理的方式來解決跨域問題。
3、跨域請求解決方案
·修改瀏覽器的安全設置（不推薦）
·JSONP
·跨域資源共享CORS（Cross-Origin Resource Sharing）
·iframe（不推薦）
·反向代理
4、jsonp
JSONP（JSON with Padding）是JSON的一種使用模式，可用於解決主流瀏覽器的跨域數據訪問問題，在早兩三年前端解決跨域問題中經常出現這類解決方案。
JSONP的原理就是，Ajax存在跨域安全問題但是script標簽是不存在這類問題的，於是乎就有人根據這個特性做文章找解決方案。
5、CORS
跨域資源共享CORS（Cross-Origin Resource Sharing）
·CORS是一個新的W3C標准，它新增的一組HTTP首部字段允許服務器其聲明哪些來源請求有權限訪問哪些資源，換言之它允許瀏覽器向其聲明了CORS的站進行跨域請求。
·這種方式最主要的特點就是會在響應的HTTP首部增加Access-Control-Allow-Origin等信息，從而判定哪些資源站可以進行跨域請求，還有幾個其他相關的HTTP首部進行更加精細化的控制，最主要的還是Access-Control-Allow-Origin。具體每個首部信息的含義可以去搜索詳細了解下。
·CORS與JSONP對比來說優勢比較明顯，JSONP只支持GET方式局限性很多，而且JSONP並不符合處理業務的正常流程。采用CORS的方式，前端編碼與正常非跨域請求沒有什么不同。在目前很多的Fake API（模擬接口服務）、Mock Server（數據模擬服務）以及其他公共服務上都很多采用CORS的方式來解決跨域問題，例如json-server等。
6、反向代理
·既然不能跨域請求，那么我們不跨域就可以了。通過在請求到達服務前部署一個服務，將接口請求進行轉發，這就是反向代理。通過一定的轉發規則可以將前端的請求轉發到其他的服務。以Nginx為例：
·通過反向代理我們將前端后端項目統一通過反向代理來提供對外的服務，這樣在前端看上去就跟不存在跨域一樣。
·反向代理麻煩之處就在原對Nginx等反向代理服務的配置，在目前前后端分離的項目中很多都是采用這種方式。
7、總結
·綜上所述，CORS和反向代理是目前使用最多的解決方案，這兩個解決方案使用的場景並不相同，我們要根據自身的需求進行選擇。公共服務、Fake APl、Mock Server一般采用CORS的方案；而公司前后端分離的項目中更多是采用反向代理的方案。
·文章相關代碼地址：https://github.com/403studio/cors
本文內容參照自b站視頻：https://www.bilibili.com/video/BV1W4411u7av?from=search&seid=5859585150600478647