目前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
你得支持是我最大的动力
如需帮助就扫一下啦
