nuxt.js 当地开辟跨域题目（Access-Control-Allow-Origin）及其解决方案

2024年3月25日 177次阅读 来源: gauseen

题目形貌

如今 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.js

modules: [
    // 要求代办设置，处理跨域
    '@gauseen/nuxt-proxy',
],
proxyTable: {
    '/api': { target: 'http://example.com', ws: false }
},

注：

/api ———————— 每一个接口特定标识字段 [String]
target —————— 目的代办效劳 [String]
ws —————————— 是不是支撑 websocket 代办 [Boolean]

迎接接见我的个人博客 攻城狮传送门
未经作者许可，制止转载，感谢！
迎接留言、批评！

    原文作者：gauseen
    原文地址: https://segmentfault.com/a/1190000013920576
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞