Nuxt.js配置proxy跨域代理以及asyncData使用方法

proxy跨域代理

首先下载proxy

cnpm i  @nuxtjs/proxy -D
1

在nuxt.config.js中配置

//找到modules模块，把proxy添加到里面
 modules: [
    ''@nuxtjs/axios'',
    ''@nuxtjs/proxy''
  ],

 axios: {
    proxy: true // Can be also an object with default options
  },
  proxy: {
      ''/api'': {
      changeOrigin: true,
      target: ''http://127.0.0.1:8082'', // 允许跨域的服务器地址
      pathRewrite: {
        ''^/api'': ''''
      }
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

另外你在asyncData中请求数据的时候，发现代理并不起作用

asyncData使用方法

**补充：**asyncData是nuxt一个钩子函数，会在渲染页面之前调用，所以ssr所请求的数据一般放在这个里面，但是我发现写在这个里面我的代理就不起作用，但是写在mounted就可以，后来查阅一些文章，有的说这个asyncData钩子只能写完整的请求路径，不支持跨域的写法：

   asyncData() {
     //在这个钩子里面要使用return，请求路径需要是完整的路径
     return axios.get(''http://127.0.0.1:8082/tem'').then(res=>{
           console.log(res,111111111111);
          return {ff:res.data.data}
      })
  },  
1
2
3
4
5
6
7

服务器与服务器之前不存在跨域的问题，所以不需要走代理和后端允许跨域的设置我们依然可以访问到数据，
另外需要注意；asyncData是在组件渲染之前调用的，所以不能使用this，我们直接以对象的形式把值return出去就行了，ff是我们需要的数据，在template中直接使用就行了

<template>
    <div>
        <h1>{{ff}}</h1>
    </div>
</template>
1
2
3
4
5