跨域問題(react項目)

react項目前後端的跨域問題

首先要了解爲什麼會產生跨域,

1 web中瀏覽器的同源策略,這個是瀏覽器本身的行爲無法改變(目的是爲了更加安全)。
2 應用程序本身設置的禁止跨域限制。
3.不允許跨域訪問並非是瀏覽器限制了發起跨站請求,而是跨站請求可以正常發起,但是返回結果被瀏覽器攔截了。

什麼情況會導致跨域

1. 不同域名屬於跨域,如:www.a.com 和www.b.com,另外www.a.com 和www.a.com.cn也屬於不同域名。 
2. 主域名和子域名(二級域名、三級域名等)跨域,如:www.a.com 和 bbs.a.com 跨域。
3. 不同協議屬於跨域,如:http://www.a.com 和 https://www.a.com。
4. Ip和域名屬於跨域,如:123.23.23.12 和 www.a.com。

在一個完整的項目開發測試的過程中,往往會遇到前端的端口和後端的端口不一致,就會導致下圖:
在這裏插入圖片描述
這此使用的一個方法就是jsonp可以解決跨域問題但是支持get請求,
還有一種方法cors,但是得修改服務器上的東西,允許跨域。會比較麻煩。
因此這裏用另一種方法- - -代理 ,代理服務器。
顧名思義,在請求數據是會都先經過代理處理過後不會有跨域問題了。
使用代理服務器,使用代理方式跨域更加直接,因爲同源限制是瀏覽器實現的。如果請求不是從瀏覽器發起的,就不存在跨域問題了。

在package.json中最後加上這一句,別忘了前面再加個 逗號 ,這個4000是我後端的端口,你們可以根據自己的進行調整。

 "proxy":"http://localhost:4000"

在這裏插入圖片描述
這種方法值適合在本機模擬,如果真正的生產環境,則需要ngnix轉發或者使用node配置。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章