我目前正在开发一个用Angular 2制作的应用程序和一个用Express制作的API。我正在努力使我的Http请求从Angular工作,因为我收到CORS错误。我在两个不同的环境中有两个不同的问题(但我想如果我明白我错过了什么,我可以纠正两者)
首先,这里是如何管理CORS在Express中:
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Credentials");
res.header("Access-Control-Allow-Credentials", "true");
这里是Angular中的post请求:
this.http.post(Constants.SEND_MAIL, {body1, body2, body3})
.map(
(response: Response) => {
console.log(response.json())
return response.json()
}
)
以下是给我带来麻烦的环境:
我的webapp和API都是本地运行的
当我发出一个post请求时,我得到以下错误:Access to XMLHttpRequest at 'http://localhost:3000/api/data' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
当我启动Angular应用程序时,我使用了一个proxy.con.json文件:
"/api/data": {
"target": "http://localhost:3000/",
"secure": false
}
我称之为:
ng serve --port 4200 --proxy-config proxy.conf.json --environment=local
Angular app在本地运行,Express在我开发的NGINX服务器上运行
这一次,请求挂起了一段时间,然后我得到了以下错误:Access to XMLHttpRequest at 'https://exemple.com/api/data' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
但这一次它只对这条特定的路线不起作用。所有其他路线都运行良好。
我刚刚开始使用Angular,所以我想我可能会错过一些关于如何处理CORS的重要内容。
1条答案
按热度按时间sulc1iza1#
错误消息指出问题出在对the preflight OPTIONS request的响应上。
您没有提供mcve,但我假设您在POST请求的端点代码中添加了这些头。
您需要
options
和post
的端点,* 两者 * 都需要提供CORS头。扔掉你写的处理CORS的代码。你重新发明了轮子,却制造了一个不起作用的轮子。
使用
cors
module from npm,它提供了中间件,可以为您处理CORS--在预处理和最终请求时。确保您: