Network Error；net::ERR_FAILED（請求跨越）前後端

巴蒂青葱發表於2024-04-08
ErrorAI後端

（跨域請求：跨域是指瀏覽器不允許當前所在的源請求去訪問另一個不一樣的源請求，源是指請求協議、域名、埠號，這三個如果有一個不一致就是跨域請求）

當前URL 請求URL 是否跨域 結果分析
http://www.kuakuakua.com http://www.kuakuakua.com/index.html 否 同源（域名、協議、埠號一致）
http://www.kuakuakua.com https://www.kuakuakua.com 跨域 協議不同（http/https）
http://www.kuakuakua.com http://www.javashuo.com/ 跨域 域名不同（www.kuakuakua.com/www.javashuo.com）
http://www.kuakuakua.com:8080 http://www.kuakuakua.com:8081 跨域 埠號不同（8080/8081）

解決方法

步驟一：在專案目錄下找到 vue.config.js 檔案開啟編輯


步驟二：按照圖中的結構，將給出的程式碼複製到 module.exports 中

 1 devServer: {
 2     proxy: {
 3       "/proxy_url":{           // /proxy_url 這個用來和根路徑 baseURL 進行匹配
 4         target: 'http://127.0.0.1:5000',  // 這個是填寫跨域的請求域名+埠號，也就是要請求的URL(不包含URL路徑)
 5         changeOrigin: true,  // 是否允許跨域請求，在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
 6         pathRewrite: {   // 路徑重寫
 7             '^/proxy_url': '/' // 替換target中的請求地址，原請求為 http://127.0.0.1:8000/kuayu 實際請求為 http://127.0.0.1:8000/proxy_url/kuayu  
 8         }
 9       }
10     }
11   }


步驟三：找到main.js檔案，將axios.defaults.baseURL 設定為 /proxy_url

1 axios.defaults.baseURL = ‘/proxy_url’

步驟四：然後xxx.vue檔案中的methods中的axios請求正常使用就可以了 此處的完整請求URL是
http://127.0.0.1:5000/testcase_orm（步驟四隻是提供一個示例，具體的請求URL按照自己專案的URL去請求）

 1 methods:{
 2     getCaseList: function(){
 3         console.log("xxxxxxxxx")
 4         console.log('檢視介面呼叫是否成功')
 5         this.$axios.get('/testcase_orm').then((result)=>{
 6              console.log('檢視介面呼叫是否成功，被呼叫則成功')
 7              console.log(result)
 8         })
 9     }
10   }


解決方法解析：
跨域問題，可以讓服務端去新增請求頭欄位資訊以及允許跨域訪問，服務端的跨域問題不在本文章描述，感興趣可以去看博主的另一篇Django跨域問題解決的博文

vue跨域問題本次使用的是代理方案進行解決，透過本地伺服器進行代理轉發到目標伺服器，跨域只針對瀏覽器，對於node服務發出的請求時不會出現跨域問題，從而解決瀏覽器跨域問題。

後端解決辦法

情況一

在Controller上面新增一個註解@CrossOrigin，解決跨域問題：

1 @RestController
2 @CrossOrigin
3 @RequestMapping("/service/api")
4 @Api(tags = "API介面")
5 public class ApiController {
6 ..................................................
7 }

情況二
2.1、API請求地址出錯
請求地址：前端API請求的地址跟後臺的Controller不一致導致，檢查一下！

三、情況三
3.1、分散式微服務專案一般有使用Nginx做反向代理，因為有很多服務埠，但設定了服務地址字首不一致也會導致前端請求地址找不到，從而拿不到資料。

Nginx配置的服務埠地址要求一定要有eduservice，不然前端請求不到，拿不到資料會報：Network Error。

相關文章