目前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.urlreq.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

你得支持是我最大的動力

如需幫助就掃一下啦