第一種方式 CORS
首先你需要閱讀CORS得湘，
首先你需要閱讀CORS逞度，
首先你需要閱讀CORS潮针，重要的事情說3遍
當(dāng)瀏覽器發(fā)送一個跨域的xhr時伏穆，需要注意的是漩绵，首先會發(fā)送一個Request Method: OPTIONS類型的請求，如下圖
image.png
此時后臺需要處理的是杆怕，發(fā)送一些
header笤虫，通知瀏覽器協(xié)商的內(nèi)容，可以進(jìn)行跨域訪問直撤，已php為例非竿，寫法如下
header('Access-Control-Allow-Origin:*'); // 可以進(jìn)行的跨域ip或域名，*代表所有
header('Access-Control-Allow-Methods:OPTIONS, GET, POST'); // 允許跨域的請求方式谋竖，options红柱，get侮东，post請求
header('Access-Control-Allow-Headers:X-Requested-With,key,token'); // 允許通過的自定義hearder字段，可以寫多個
１尽Ｇ难拧！特別需要注意的有2點(diǎn)Ｌ浮？硐小！
-
OPTIONS的請求并不會攜帶任何額外的數(shù)據(jù),它只是一次預(yù)處理握牧，在此次請求中不能接收get,post,header等數(shù)據(jù)容诬，所以你需要做的只是設(shè)置header，然后直接返回(不要再讓程序走向具體的代碼邏輯了沿腰，你接受不到其它數(shù)據(jù)的览徒，你應(yīng)該使用一個基類來統(tǒng)一處理跨域)http的200成功狀態(tài)碼，如果你的后端程序返回了500等其他狀態(tài)碼颂龙，會導(dǎo)致真正的請求(get或post)不會再進(jìn)行下去. - 如果使用的是
cookie和session模式习蓬，cookie一般是不會自動攜帶的章咧，客戶端需要設(shè)置Access-Control-Allow-Credentials: true,但此時又會出現(xiàn)另外一個問題,后端此時的Access-Control-Allow-Origin:*不可以設(shè)置為*伺帘，這是不被允許的，因?yàn)椴话踩罨怠５憧梢允褂靡粋€技巧來回避這個問題企巢，'Access-Control-Allow-Origin:動態(tài)獲取到的客戶端ip'
第二種方式枫慷，前端proxy代理，只適用于項(xiàng)目開發(fā)
當(dāng)你使用了前端的vue浪规，react,angular等框架時或听，可以直接使用他們的腳手架，腳手架提供一個配置好的webpack,可以在配置文件中的proxy添加代理地址笋婿，這樣可以避免跨域問題誉裆，如果是自己搭建的框架自行配置webpack依然可以實(shí)現(xiàn)代理
第三種方式，后端代理萌抵，可以用于項(xiàng)目部署
后臺的靜態(tài)服務(wù)器（apache,nginx）一般都帶有代理功能找御，可以自行配置，代理前端項(xiàng)目的xhr請求到真實(shí)的后臺接口地址绍填，這樣可以避免跨域問題
