nuxt.js 本地开发跨域问题（Access-Control-Allow-Origin）及其解决方案

问题描述

现在 web 开发都是前后端分离的年代，前后端分离的好处我就不啰嗦了，进入问题 ==>>>
使用 nuxt.js 本地开发 Vue 项目时，ajax 请求时可能会遇到跨域问题，控制台具体报错形式如下：

Failed to load http://example.com/api/somethings.do: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

这就是因为跨域问题导致的结果。

于是鄙人写了一个解决 nuxtjs 本地开发跨域问题的 npm 包，具体安装及其使用方式如下：

Nuxt.js Proxy Module

参考资料请看 nuxtjs api，
nodejs 中间件 http-proxy-middleware api

使用步骤：

一、安装 @gauseen/nuxt-proxy 依赖资源

npm install --save-dev @gauseen/nuxt-proxy

二、添加 @gauseen/nuxt-proxy 资源至 nuxt.config.js 文件的 modules 对象之下

举个栗子：

// nuxt.config.jsmodules: [// 请求代理配置，解决跨域'@gauseen/nuxt-proxy',
],
proxyTable: {'/api': { target: 'http://example.com', ws: false }
},

注：

/api ———————— 每个接口特定标识字段 [String]
target —————— 目标代理服务 [String]
ws —————————— 是否支持 websocket 代理 [Boolean]

欢迎访问我的个人博客攻城狮传送门
未经作者允许，禁止转载，谢谢！
欢迎留言、评论！

nuxt.js 本地开发跨域问题（Access-Control-Allow-Origin）及其解决方案相关推荐

【nuxtjs 指南】解决nuxtjs本地开发跨域和防止路由与api冲突问题
目前vue很火,大部分开发者把vue当做框架首选,然而spa是对搜素引擎很不友好,就会想到ssr,在vue社区nuxtjs完美的解决了这个问题,目前nuxt还不算太成熟,当然对于新手坑比较多,当我们确 ...
js解决iframe跨域问题
js解决iframe跨域问题参考文章: (1)js解决iframe跨域问题 (2)https://www.cnblogs.com/qinxuhui/p/12154995.html 备忘一下.
[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
vue : 本地调试跨域问题的解决办法：proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
【JS】AJAX跨域-JSONP解决方案（一）
[JS]AJAX跨域-JSONP解决方案(一) 参考文章: (1)[JS]AJAX跨域-JSONP解决方案(一) (2)https://www.cnblogs.com/h--d/p/11470534. ...
JS中的跨域问题及解决办法汇总
一.什么是跨域? 在了解跨域之前,首先要知道什么是同源策略(same-origin policy).简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的JS进行交 ...
Ajax跨域请求,无法传递及接收cookie信息解决方案
Ajax跨域请求,无法传递及接收cookie信息解决方案参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...
谷歌扩展程序设置ajax请求允许跨域（极少人知道的解决方案）
谷歌扩展程序设置ajax请求允许跨域(极少人知道的解决方案) 参考文章: (1)谷歌扩展程序设置ajax请求允许跨域(极少人知道的解决方案) (2)https://www.cnblogs.com/ga ...
js webpack 解决跨域问题_webpack-dev-server 作代理解决跨域，让你的本地开发飞起来...
最近在接到一个需求是做一个可视化的监控系统,mock数据来开发的话实在不太方便,况且数据量之大.查了一下资料,可以用webpack-dev-server作为代理,直接请求线上,哈哈哈,是不是很方便. ...