首頁(yè) 猿問(wèn) 這種場(chǎng)景下用什么解決跨域？

這種場(chǎng)景下用什么解決跨域？

JavaScript

慕仙森 2018-09-24 17:13:04

問(wèn)題：目前的項(xiàng)目是這樣的，比如本機(jī)地址是：192.168.1.101，后臺(tái)地址是：192.168.1.105:9006，然后前端項(xiàng)目跑起來(lái)的地址是192.168.1.102:8008，項(xiàng)目當(dāng)中使用 axios，baseUrl = 192.168.1.105:9006所以每次發(fā)起請(qǐng)求就跨域了，不知道這種情況是怎么解決跨域問(wèn)題的？

查看完整描述

1 回答

慕娘9325324

TA貢獻(xiàn)1783條經(jīng)驗(yàn) 獲得超4個(gè)贊

其實(shí)跨域最常用的解決方式就兩種

1 . CORS 后端設(shè)置 header

Access-Control-Allow-Origin: * 允許哪些域名（*所有）
Access-Control-Allow-Headers: X-Requested-With 允許哪些請(qǐng)求頭
Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS 允許哪些方法（非簡(jiǎn)單請(qǐng)求會(huì)有option）
后臺(tái)配置完之后 axios
baseUrl = 后端服務(wù)器地址 （開(kāi)發(fā)模式）
baseUrl = 線上服務(wù)器地址 （生產(chǎn)模式）

2 . 代理
跨域是瀏覽器限制的后端直接請(qǐng)求并不限制
所以可以 瀏覽器 -> 代理服務(wù)器 -> 后端 -> 代理服務(wù)器 -> 瀏覽器
react vue腳手架都是用的 webpack-dev-server 其內(nèi)部都是用 http-proxy-middleware
你也可以自己用node簡(jiǎn)單的代理 http http-proxy-middleware http-proxy 都可以
也可以用 nginx
配置完代理之后 axios
baseUrl = 代理服務(wù)器地址 （開(kāi)發(fā)模式）
baseUrl = 線上服務(wù)器地址 （生產(chǎn)模式）