【nuxtjs 指南】解决nuxtjs本地开发跨域和防止路由与api冲突问题

目前vue很火,大部分开发者把vue当做框架首选,然而spa是对搜素引擎很不友好,就会想到ssr,在vue社区nuxtjs完美的解决了这个问题,目前nuxt还不算太成熟,当然对于新手坑比较多,当我们确定使用了这个nuxtjs的时候,脚手架搭建好之后,就会面临一个问题,在前后分离的情况下,端口不一致,怎么解决跨域问题呢?

在前后分离的场景下开发,经常会遇到下面场景

The 'Access-Control-Allow-Origin' header has a value 'http://xxx.com' that is not equal to the supplied origin. Origin 'http://localhost:3000' is therefore not allowed access.

在vue里面我们可以使用vue cli 自带的 proxyTable来解决这个问题 (解决方案
那么我们怎么在nuxtjs 能像vue这么方便的解决这个问题呢?
有些小伙伴可能会想到直接使用express 中间件,主动改变header

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

这也是一种解决方案,只是不太优雅

可能我们还会遇到 api 与 路由冲突等问题

我们现在去做一个比较完美的解决方案

在axios上面配置添加前缀 api 来区分一下,是真正的路由还是api的url

在plugins文件夹里面创建文件

axios.js

import * as axios from 'axios'

let options = {}
// 需要全路径才能工作
if (process.server) {
  options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}/api`
}

export default axios.create(options)

这样每次通过axios访问api的时候都会自动在前面加上api

下面的思路是,每当检测到路由上有/api这个字符的时候,就去给它分配到api的主机上
在实际项目中,无论使用的是koa,还是express,或其它语言的api,根据它的端口来配置

安装@nuxtjs/axios 和 @nuxtjs/proxy 官方模块

ad:欢迎关注订阅号:树东先森

安装方式
npm i @nuxtjs/axios  @nuxtjs/proxy -D
在 nuxtjs.config.js 配置文件最后添加下面模块,并且设置代理
  modules: [
      '@nuxtjs/axios',
      '@nuxtjs/proxy'
  ],
  proxy: [
      [
        '/api', 
        { 
          target: 'http://localhost:3001', // api主机
          pathRewrite: { '^/api' : '/' }
        }
    ]
  ]

通过上面配置后,每次在项目中访问通过axios访问api的时候就会去localhost:3001主机服务去查询
通过url访问的时候直接由nuxtjs来处理,当然在浏览器上面写api/article 也会走代理哦

axios访问demo

 async asyncData () {
    let { data } = await axios.get('/article/getFrontArticleList')
    console.log(data)
    return { users: data.data }
  },

tip:如果本篇教程不能指导你操作,或有什么疑问请留言,如果帮助到你,请点赞收藏?

大家有什么问题可以来 http://nuxtjs.net 提问

订阅号:树东先森
github账号: wsdo

你得支持是我最大的动力

如需帮助就扫一下啦
图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值