Question

我尝试通过以下方式提交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无关。

我的问题有2部分。

如果这是必须在服务器端修复以便客户端顺利访问的东西，那么当直接从HTML文件和POSTMAN插件提交时它是如何工作的？
使用Angular2提交时，虽然控制台中出现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.
});

Answer 1

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

记住：

如果您从localhost请求：4200到localhost：4200 / api CORS不会发生。
只有在不同的服务器请求时才会出现CORS错误。

如何解决这些问题？
1. 考虑如果您使用快递作为后端。
2. 您应该添加中间件以访问您的路线。

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

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

1 个答案: