Vue.js 和 Nodejs 的 CORS 问题

Posted 2023-03-04

【中文标题】Vue.js 和 Nodejs 的 CORS 问题

【英文标题】：CORS issue with Vue.js and Nodejs

【发布时间】：2019-06-05 05:34:58

【问题描述】：

我用vuejs和nodejs，vue客户端地址http://localhost:8000，nodejs服务器地址http://localhost:3000。

调用api时出现cors错误CORS preflight channel did not succeed request headers

请求

Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Host:localhost: 3000 
Origin:http://localhost: 8000

回复

Access-Control-Allow-Headers: Origin, X-Requested-With, Accept,content-type
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT,PATH
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 86400
Content-Type:application/json; charset=utf-8

响应错误是NS_ERROR_DOM_BAD_URI

【问题讨论】：

是的，如果不配置 CORS，您将无法发出跨域请求。使用另一个端口也被视为跨域域。

【参考方案1】：

如果您使用 expressjs，您可以简单地使用 nodejs cors lib 在您的节点服务器中启用 CORS。

我强烈建议您仅为开发目的激活它：

var cors = require('cors')

if (NODE_ENV !== 'production') 
   app.use(cors())

【讨论】：

您为什么强烈建议这样做？您能否举个例子，为什么 CORS 对某些配置很危险（如果向任何人开放，来自恶意服务器的跨域请求等）。

如果他不了解 CORS，我不确定他是否已准备好进行高级配置以使 CORS 在生产中保持启用状态。但是您是对的，您始终可以通过正确的配置启用 cors。

@ssc-hrep3 不确定是否需要说明为什么需要 CORS 标头，以及 the official docs 提供安全用例

@Maelig 如果您不在 prod 上激活它，那么问题将是相同的，手动允许 cors 或使用 cors NPM，您始终可以将来源列入白名单。 npmjs.com/package/cors#configuring-cors-w-dynamic-origin

谢谢，我的问题已经解决了，但是你能解释一下为什么我的标题配置不起作用。具体来说，当我调用方法后宽度参数时，它会收到上述错误