北京地铁建设的网站,深圳建网站兴田德润可信,成都 企业 网站建设,网络营销方式ppt目前vue很火#xff0c;大部分开发者把vue当做框架首选#xff0c;然而spa是对搜素引擎很不友好#xff0c;就会想到ssr#xff0c;在vue社区nuxtjs完美的解决了这个问题#xff0c;目前nuxt还不算太成熟#xff0c;当然对于新手坑比较多#xff0c;当我们确定使用了这个… 目前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 axioslet 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 你得支持是我最大的动力 如需帮助就扫一下啦
