node.js - CORS 502 网关错误,AWS Elastic Beanstalk Node.js 服务器,尽管 CORS 配置正确
问题描述
我很难弄清楚这个 CORS 问题。我将我的 node.js 代码上传到 Elastic Beanstalk 上的服务器。它应该正常运行,但由于 502 Bad gateway,我无法发出请求。
我的网站在本地运行良好。我吓坏了,因为我必须在一周内启动这个网站,我想先在线测试它。
OPTIONS http://example.us-east-2.elasticbeanstalk.com/api/users/signin 502 (Bad Gateway)
www.example.com/:1 Failed to load http://example.us-east-2.elasticbeanstalk.com/api/users/signin: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.
那是谷歌浏览器控制台中的错误。前端站点托管在 AWS S3 上。我相信我在 AWS 的存储桶中设置了 CORS 配置。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://www.example.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://www.example.com.s3-website.us-east-2.amazonaws.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>http://example.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://example.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
带有 expess 的节点代码集响应标头
app.use((req, res, next) =>{
res.setHeader('Access-Control-Allow-Origin', '*, www.example.com, example.com, www.example.com.s3-website.us-east-2.amazonaws.com');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
next();
});
以防万一这是我在 Angular 中提出的要求之一
this.http.post<{userName: string, userId: string, token: string; expiresIn: number, userType: string }>(BACK_END_URL_USER + 'signin', signinData).subscribe(response => {
// some code }
任何朝着正确方向的帮助都会挽救我的生命
解决方案
我已经解决了这个问题。
事实证明,我的代码上的端口不符合 AWS 节点平台的文档。
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html
我的 server.js 文件中的这一行。
const port = normalizePort(process.env.PORT || "3000");
端口将变为 3000。根据他们的文档,PORT 变量将端口设置为正确的代理/边缘服务器端口,但在我的情况下从未这样做过。
所以我最终只是将“或”端口更改为 8081,这解决了我的问题!
const port = normalizePort(process.env.PORT || "8081");
推荐阅读
- api - 虚拟主机面板架构
- javascript - document.cookie 过期无法在 Safari 中正常工作
- python - 在 Python 中运行时创建的 Linting 类
- reactjs - 在 redux-form 中,在 Field-Level Validation 中显示所有验证错误
- c# - 如何制作一个仅使用加法和仅使用 2 个变量进行除法的递归函数
- flutter - Flutter 用 provider 和 riverpod 制作表单
- typescript - Typescript: How to kleisli compose (monadic compose) Promise monad using fp-ts
- c# - 应该使用什么类型的参数来将方法作为输入?
- python - 回文测试器给出 11 的 False,但返回 121 的 True
- python - 确定函数是否包含特定方法