Angular 5 Http POST 请求转到 OPTIONS 并返回 404

Question

使用：

import { HttpClient, HttpHeaders } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type: ['application/json']
})
}
@Injectable()
export class MyService {
constructor (private http: HttpClient) {}
private myUrl = 'http://localhost:3000/my-service';
private postBody = 
`
[
{ "a": ["complex"],
"serialized": "data",
"set": [],
},{
"in": "json",
"format": []
}
]
`;
getData(): Observable<ExpectedResponseType> {
return this.http.post<ExpectedResponseType>(this.myUrl, this.postBody, httpOptions);
}
}

当我订阅此服务时，浏览器会向localhost:3000/my-service发送预检OPTIONS请求，该请求返回 404。如果我从请求中删除httpOptions，它会使用我想要的正文成功 POST 但未将Content-Type设置为application/json，因此服务器返回 500。

如何在 Angular 5 中发送内容类型为 json 的 POST 请求？服务器提供了来自 Postman 的预期结果，但我不确定如何说服 Angular 简单地发送带有我想要的标头的 POST。

Answer 1

OPTIONS 请求不是 Angular 问题，而是浏览器问题。

当浏览器发出跨域请求时，它将(对于大多数请求，取决于您请求的内容和使用的方法(首先执行 OPTIONS 请求。

OPTIONS 请求的目的是检查服务器是否允许客户端(浏览器(向其发出请求。这由服务器 CORS 响应标头确定。如果 OPTIONS 请求失败，则浏览器知道它不允许，因此不会费心提出您想要的实际请求。

这仅由浏览器强制执行，因此 POSTMAN 将正常工作。

请将 CORS 标头添加到您的服务器响应中，并确保您的服务器支持 OPTIONS 请求。

请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

如果您真的不能被 CORS 打扰，请将请求发送到同一域并让您的网络服务器重写 URL。请注意，您还必须在生产服务器中重复重写的逻辑。

Answer 2

发生这种情况是由于 CORS 限制(跨源资源共享(。浏览器不允许请求进入具有不同主机/端口组合的服务器，除非服务器允许。这是出于安全原因(例如，为了防止XSRF攻击(。有几种方法可以解决此问题：

• 更新服务器以添加允许来自任何源或给定源的 CORS 的标头(如果要允许其他服务器访问您的 API，这就是您在实际环境中执行此操作的方式(。互联网上有很多关于这方面的资源，这是一个很好的例子：http://restlet.com/company/blog/2016/09/27/how-to-fix-cors-problems/。
• 在客户端和服务器之间添加一个代理来解决问题(根据我的经验，这是命中注定的，但像 ionic 这样的框架有一个工作代理(。
• 有些浏览器不如其他浏览器严格，在这种情况下最严格的 chrome 有一个标志，允许您在开发过程中绕过 CORS 检查(谨慎使用，并且在启用此标志时不要访问真实网站，因为它可能会使您容易受到 XSRF 攻击(。标志是：--disable-web-security --user-data-dir=SOME_FOLDER。

Answer 3

我发现最好的开发解决方案是使用 Angular 代理。

const proxy = [
{
context: '/api',
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
];
module.exports = proxy;

ng serve --proxy-config proxy.config.js --open

这会将同一/api域上的所有请求重新路由回我的服务器，这样我就不必担心配置我的服务器来替换ng serve。