当前位置: 首页 > Web前端 > HTML5

Nuxt.js本地开发跨域问题(Access-Control-Allow-Origin)及其解决方法

时间:2023-04-05 14:28:55 HTML5

问题描述如今的web开发是前后端分离的时代。前后端分离的好处就不说了。进入问题==>>>在本地使用nuxt.js开发Vue项目时,ajax请求可能会遇到跨域问题,控制台的具体错误形式如下:Failedtoloadhttp://example.com/api/somethings.do:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“http://localhost:3000”。这是跨域问题的结果。于是写了一个npm包,解决了nuxtjs本地开发的跨域问题。具体安装和使用方法如下:Nuxt.jsProxyModule参考资料,请看nuxtjsapi,nodejs中间件http-proxy-middlewareapi使用步骤:1.安装@gauseen/nuxt-proxy依赖资源npminstall--save-dev@gauseen/nuxt-proxy2.在nuxt.config.js文件的modules对象中添加@gauseen/nuxt-proxy资源举个栗子://nuxt.config.jsmodules:[//请求代理配置解决跨域'@gauseen/nuxt-proxy',],proxyTable:{'/api':{target:'http://example.com',ws:false}},注:/api————————每个接口特定的标识字段[String]target————Targetproxyservice[String]ws————————是否支持websocketproxy[Boolean]欢迎来到我的个人博客攻城狮传送门没有作者的经授权,禁止转载,谢谢!欢迎留言评论!