Nuxt.js 本地开发时解决跨域问题。Access-Control-Allow-Origin

2019 年 1 月 28 日 0 条评论 7.2k 次阅读 1 人点赞

一直都是在用Vue来开发 spa,然而spa对搜索引擎很不友好,就会想到用ssr,在vue框架项目中 nuxt.js  是一个不错的 ssr 解决方案。而在使用nuxt.js 的时候,就会遇到前后端分离情况下的,域名或端口不一致导致的跨域问题。

如果直接跨域调用接口,控制台就会报错如下信息:

在普通的vue项目中,我们可以使用vue cli 自带的 proxyTable来解决这个问题,例如:

proxyTable: { 
  '/api': {  
    target: ' http://192.168.0.5:8008 ',
  } 
}

那么Nuxt 中我们如何解决这个问题呢?
有些小伙伴可能会想到直接使用express 中间件,主动改变header

app.use('/', function(req, res) {
  const url = 'https://auan.cn/api' + req.url
  req.pipe(request(url)).pipe(res.set('Access-Control-Allow-Origin', '*'))
})

这是一种解决方案,但是有时候这样会遇到 api 与 路由地址冲突等问题

其实nuxtjs也为我们提供了Proxy Module 我们可以在axios中配置一下请求接口的前缀,来区分一下当前是请求的接口地址,还是请求的路由url

使用步骤:

一、 安装一下依赖资源(新版Nuxt中已经默认集成了axios)

npm i axios qs
npm i @nuxtjs/axios @nuxtjs/proxy --save-dev

二、在nuxt项目的plugins 目录中创建 axios.js 文件

import qs from "qs"; //使用qs将请求从参数转化位字符串

export default function({ $axios, redirect }) {
  $axios.onRequest(config => {
    config.data = qs.stringify(config.data, {
      allowDots: true //Option allowDots can be used to enable dot notation
    });
    return config;
  });

  $axios.onResponse(response => {
    return Promise.resolve(response.data);
  });

  $axios.onError(error => {
    return Promise.reject(error);
  });
}

三、 添加 @nuxtjs/axios,@nuxtjs/proxy 资源至 nuxt.config.js 文件的 modules 对象之下

例如:


/*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: "~plugins/axios.js", ssr: true },
  ],

/*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

  proxy: [
    [
      '/api/',//拦截目录
      {
        target: 'http://auan.cn', // 代理api主机
        pathRewrite: { '^/api/' : '' }
      }
    ]
  ],

提示:

/api/ ———————— 每个接口特定标识字段 [String]
target —————— 目标代理服务 [String]

四、在页面组件中这样使用:

async asyncData({$axios}){

    let [resList] = await Promise.all([
      $axios.get(`/api/v1/topicList/recommend`)
    ])

    return {
      topicList: resList.data.list
    }


  },

如果想一次调用多个接口,复制对应的$axios 请求就可以了,例如:

async asyncData({$axios}){

    let [resList, resList2] = await Promise.all([
      $axios.get(`/api/v1/topicList/recommend`),
      $axios.get(`/api/v1/getListByLastTime`)
    ])

    return {
      topicList: resList.data.list,
      dataList: resList2.data.list,
    }

  },

 

雷雷

这个人太懒什么东西都没留下

文章评论(0)

(Spamcheck Enabled)