1. 程式人生 > >nuxt中-axios跨域- 伺服器端渲染

nuxt中-axios跨域- 伺服器端渲染

今天在做專案中,遇到一個問題,在一個點選事件中利用axios發請求,出現了跨域問題,之前都是直接用的伺服器端渲染,然後就一直沒出現,還是解決了很久的,所以決定把問題及解決方案記錄下來。

 tree.vue :

   

  

  

最終解決方案

在nuxt專案中的server檔案中的index.js中攔截一個地址替我們發這個請求,

server/index.js或者vue中的server.js

 

此時就需要在我們的點選事件中請求我在server的index.js的地址,及   /api/user/login

頁面地址:tree.vue

 

 

 console.log

 

 然後跨域就解決了

其中可以簡單的瞭解一下原理,因為跨域是瀏覽器出現的,而伺服器端渲染是不需要瀏覽器的支援的,簡單地說,就是他在瀏覽器渲染之前,就已經拿到資料了,所以就跟正常的請求一樣,就不會出現跨域問題了。

這裡就是利用server/index.js來作為中間層處理的,把我們的普通請求也變成了伺服器端渲染,所以在我的頁面寫點選事件的時候,就是在自己的源拿的資料,因此就不會出現跨域了。

 

在寫的時候要注意一些問題。

1,利用req.query來獲取頁面傳來的引數

tree.vue

 

 

server/index.js----->接收引數重新發請求

 

 2,此處有兩個res,上面為了區分,特意用了response來代替,避免衝突

  server/index.js

  

  response是作為別人請求/api/user/login成功的返回結果,而res是作為裡面的axios請求成功後的結果

3,server/index.js發請求寫的位置

  

  因為app.use(nuxt.render)是使沒有做處理的請求,反過來說,就是把需要做特殊處理的請求寫在前面,後面的就表示剩下的不需要做特殊處理的請求,就按正常的渲染方式就好了。(這個app.use(nuxt.render)可能解釋不怎麼好,這個因為是自帶的,也不太好解釋)

然後這個最終就算是這樣解決了。