Asyncdata cross domain error after nuxt route switching

background

according to Nuxt Official documents Explanation

asyncData The method will be in the component （ Limited to page components ） Called before each load . It can be invoked before server or routing updates . But this method does not render from the server every time , Only when the page is refreshed can it be rendered from the server , When the client clicks the link to jump, it does not render from the server , But with the standard Vue Same as single page application , Render from the client .

Be careful ：

• Can only be used in page components asyncData, That is to say pages Under folder .vue You can use , Non page components cannot call asyncData Method
• No, this , because asyncData It is called before component initialization , So there is no way to pass in the method this To refer to an instance object of the component

So that's why every time we click route jump , If our target page has asyncData When getting asynchronous data , Cross domain errors will be reported on the browser

// pages/index.vue
async asyncData({
     $axios}) {
    
  const {
    result} = await $axios.get('http://localhost:3333/home/userinfo')
  return {
    
    userInfo: result.user_info
  }
},

npm run dev

Start the project and run in http://localhost:3000
Start a local node Service provider interface , Service running on http://localhost:3333
Click route jump and cross domain errors will appear as follows ：

Refresh and the error will disappear , And you can get asynchronous data normally .

Solving cross domain solutions

npm i @nuxtjs/axios @nuxtjs/proxy

// plugins/request.js
//  It is used to unify the data of the return interface 
export default function({
     app: {
     $axios}}) {
    
  $axios.onResponse(response => {
    
    return response.data
  })
}

// nuxt.config.js
plugins: [
  '@/plugins/request'
],
modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],
axios: {
    
  proxy: true,
  credential: true
},
proxy: {
    
  '/api/': {
    
    target: 'http://localhost:3333/',
    pathRewrite: {
    
      '^/api/': '/',
      changeOrigin: true
    }
  }
},

// pages/index.vue
async asyncData({
     $axios}) {
    
  const {
    result} = await $axios.get('/home/userinfo')
  return {
    
    userInfo: result.user_info
  }
},

Revised nuxt.config.js Remember to restart the content

How to use asynchronous data in components

If the component is not a page component bound to the route , In principle, asynchronous data cannot be used . because Nuxt.js Just extend the data Method , It can support asynchronous data processing .
For non page components , There are two ways to achieve asynchronous data acquisition ：

1. In the component's mounted Method to realize the logic of asynchronous data acquisition , Then set the data of the component , The limitation is ： Server side rendering is not supported .
2. In the of page components asyncData or fetch Method API call , And use the data as props Pass to subcomponent . Server rendering is working properly . shortcoming ：asyncData Or page extraction may not be very readable , Because it's loading data from other components . All in all , Which method to use depends on whether your application needs to support the server-side rendering of sub components .