web跨域
跨域產生原因:
a. 協(xié)議名不一樣
b. 主機不一樣
c. 端口不一樣跨域有無問題:
a. ajax請求會產生問題, 這是瀏覽器處理的結果
b. 通過url(統(tǒng)一資源定位)獲取的圖片(資源)也是一種跨域,但是不會產生問題處理跨域的方法
jsonp 只支持get
cors 返回響應頭,允許跨域
prory 開發(fā)中使用服務器代理(例如: webpack-dev-server)
一雁比、cors
服務器端:
- response.setHeader("Acoss-Control-Allow-Origin", "*") // 設置響應頭,允許接收地址設置
+ 不要設置為*===> 允許所有請求地址通過
優(yōu)缺點:
- 不需要前端設置, 后臺設置
- 不安全, 沒有http服務的服務器不支持
二、jsonp (用的不多)
- 根據(jù)后臺的函數(shù)名, 設置全局的腳本函數(shù), 設置接收數(shù)據(jù)的回調函數(shù)
- 發(fā)送標簽src的http請求, 不是異步ajax(http)請求a
jsonp配置
- 配置全局js
// jsonp.js
function fn (data){
console.log(data)
}
- 頁面發(fā)送請求
<script src='jsonp.js'><script> //需要在jsonp請求之前
<script src="http://127.0,0,1:8000/fn"><script> // 通過src屬性請求進行跨域,瀏覽器不攔截
- 后臺返回的對應函數(shù)和數(shù)據(jù)
res.setHeader("Content-type", "application/javascript") //設置響應的類型
res.end("fn(123)")
優(yōu)缺點
- 需要前端和后臺配合, 前端要根據(jù)后臺返回函數(shù)名設置全局接收數(shù)據(jù)的回調
三英妓、proxy 代理服務器 (開發(fā)中用)
- 發(fā)送請求到代理服務器, 由代理服務器發(fā)送請求目標的服務器
- 目標服務器, 響應數(shù)據(jù)給代理服務器, 代理服務再返回數(shù)據(jù)給瀏覽器
- 腳手架已經配置了node代理服務器, 只需要配置需要代理的目標服務器就行了
腳手架配置需要代理的主機
- vue在config/index.js 中的proxytable 中進行配置
優(yōu)缺點
- 需要前端自己搭這個proxy, 不過一般腳架已經配置好了
擴展:
Request Header 請求頭
Accept: 設置接收的那些類型的數(shù)據(jù), 瀏覽器根據(jù)順序解析
Response Header 響應頭
Content-type: 設置返回的類型, 瀏覽器根據(jù)這個類型進行解析, 例如: javascript
res.setHeader("Content-type", "application/javascript")
