【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

你得支持是我最大的動力

如需幫助就掃一下啦