angularjs 使用Angular Http Request to Express REST API的CORS问题

5lhxktic  于 2023-06-04  发布在  Angular
关注(0)|答案(1)|浏览(159)

我目前正在开发一个用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的重要内容。

sulc1iza

sulc1iza1#

错误消息指出问题出在对the preflight OPTIONS request的响应上。
您没有提供mcve,但我假设您在POST请求的端点代码中添加了这些头。
您需要optionspost的端点,* 两者 * 都需要提供CORS头。
扔掉你写的处理CORS的代码。你重新发明了轮子,却制造了一个不起作用的轮子。
使用cors module from npm,它提供了中间件,可以为您处理CORS--在预处理和最终请求时。
确保您:

  • 在注册端点之前先注册中间件(因为Express按顺序测试它们)
  • 按照文档中的说明将模块用于印前检查请求。

相关问题