表单提交成功，没有“Access-Control-Allow-Origin”控制台错误

Posted 2023-03-04

【中文标题】表单提交成功，没有“Access-Control-Allow-Origin”控制台错误

【英文标题】：Form submitted successfully with No 'Access-Control-Allow-Origin' console error

【发布时间】：2017-10-05 07:39:42

【问题描述】：

我尝试通过以下方式提交html Form。

单个演示 HTML 文件。 - 它可以工作（没有错误和 HTTP 200 响应代码） 使用 Chrome POSTMAN 插件提交表单 - 可以正常工作（没有错误和 HTTP 200 响应

但是，当我尝试提交相同的表单时。

使用 Angular2 - 表单提交成功（有错误和 HTTP 200 响应代码）

这是错误

XMLHttpRequest cannot load https://docs.google.com/forms/d/e/1FAIpQLSfXzWPpI4X9ghY_6p5ghJRt6DC80FnrKqlw8lUg-OT-bKzBeg/formResponse. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

我在 SO 中发现了一些类似的问题，例如 1 2 3，现在我知道该错误与 Angular2 无关。

我的问题有两个部分。

如果这是必须在服务器端解决的问题，客户端才能顺利访问，那么直接从 HTML 文件和 POSTMAN 插件提交时它是如何工作的？ 使用Angular2提交时，虽然console有Access-Control-Allow-Origin错误，但是表单提交成功，HTTP响应码200，这个怎么理解，为什么是200响应码，如果有错误？

这是我的 angular2 代码，可能有问题吗？

this._http
.post(this.postUrl, data)
.subscribe(data => 
    console.log('Congrats your feedback is recorded...'); 
    // this is not printed in console.log so far 
, error => 
    console.log(error.json()); 
   // No 'Access-Control-Allow-Origin' header is present on the requested resource.
);

【参考方案1】：

根据浏览器政策，浏览器中不允许使用 CORS。但是，这些限制不适用于 POSTMAN。因此它应该在后端而不是在前端进行修复。

记住：

如果您从 localhost:4200 请求到 localhost:4200/api，则不会发生 CORS。

CORS 错误仅在不同的服务器请求时发生。

如何解决这些问题？

考虑是否使用 express 作为后端。 您应该添加中间件来访问您的路由。

app.use(function(req,res,next)
    res.header('Access-Control-Allow-Origin', '*');
    //res.header('Access-Control-Allow-Headers','authorization');
    next();
);

【参考方案2】：

它本身不是服务器端的问题。服务器只是选择不允许来自您的域的跨域请求（或者甚至没有考虑允许它们）。

问题在于，除非服务器允许，否则 浏览器 拒绝向不同域上的服务器发送 AJAX 请求。这是浏览器实现的 CORS 规范的强制要求。

经典表单不使用 AJAX，因此可以正常工作。

Chrome 插件不受与从服务器加载的传统 HTML 页面相同的 CORS 限制，因此也可以正常工作。