React項目跨域處理（兩種方案）

跨域解決方案可以分為開發模式和生產模式

 

git查看腳手架工具，如下所示

 

 然后進入docusaurus文檔，文檔里有關於跨域的相關配置

 

 如下所示進行配置

 

（1）第一種方案

 

配置后重新測試

 

 

 

（2）第二種跨域方案

先利用express框架搭建簡單后台服務

接下來創建路由文件

 

接下來啟動后台服務，做下測試。此時node服務器和React所在的webpack服務器不在同一個端口號，所以即使在本地開發，仍存在跨域

 

接下來查看個github文檔的第二種方案，手動配置（結合Express使用）

詳見https://juejin.im/post/5bd13c5ce51d457a203cebf4和https://www.jianshu.com/p/a248b146c55a

 

 

 

 

 

 

至此便實現了跨域，這種在開發里應用較多

 

 

 

 

（3）案例實踐：

之前的之所以可以請求其他域名下的網絡數據，是因為我們在服務端設置了相關配置，如下所示

如果將其注釋掉，再次測試，如下所示

此時便無法跨域操作，接下來介紹下React如何實現跨域代理

 

（1）分析

　　React項目腳手架啟動時，便會在服務器下啟動，主要運行在webpack服務器下。此時可以利用前端服務器去解決跨域問題

注意：
    跨域只是前端遇到的問題，即瀏覽器的相關政策導致的。服務器與服務器之間並不存在跨域。
　　注意：該配置只是用於開發階段，真正上線后是不能用的

　　

 

（2）步驟

　　1、執行npm run eject拋出配置文件

　　　　

　　　　本地有git的可能會報錯，將git初始化倉庫提交一下即可。噴出配置文件后，項目結構如下

　　　　

　　2、修改配置文件config/webpack.config.dev.js

 　　　　文件內部添加服務器配置，因為新版沒有了該配置文件。所以我們換種方法 ，配置package.json文件

 

 

（3）package.json文件

　　在package.json中添加proxy字段，如下所示

　　

 　　接口調用：

　　

此時的/api/login便會被替換為http://localhost:3888/login

　　proxy中的部分參數說明：

1、'/test/*' 以及 target: 'http://localhost'

• 從名字就能看出，這個實際上是將匹配 '/test/*' 這種格式的API的域名重定向為 'http://localhost'
• 結合上面的 “調用接口” 可以看出， url: '/test/testFetch/Login.php' 這句，實際上會自動補充前綴，也就是說，url: '/test/testFetch/Login.php' 等價於 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'
  • 但是，我們使用了http-proxy進行重定向，這樣的話，url: '/test/testFetch/Login.php' 等價於 url: 'http://localhost/test/testFetch/Login.php'

2、changeOrigin

• true/false, Default: false - changes the origin of the host header to the target URL
• 本地會虛擬一個服務端接收你的請求並代你發送該請求——這個是別人的說法
• 我試了一下，就算這個參數設置成 false 也有部分情況是可以的，建議將其設置成 true 

3、secure

• true/false, if you want to verify the SSL Certs

4、pathRewrite

• 例子： pathRewrite: {'^/api': ''}
• Object-keys will be used as RegExp to match paths

 

小結：Vue也是同理

　　

 

 

 

 

 

.