[英]CORS 502 Bad Gateway, AWS Elastic Beanstalk Node.js server, despite proper CORS configuration
Im having an extremely hard time trying to figure this CORS issue out. 我很难解决这个CORS问题。 I uploaded my node.js code to a server on Elastic Beanstalk.
我将我的node.js代码上传到Elastic Beanstalk上的服务器上。 Its supposedly running normally but I cant make a requests because of 502 Bad gateway.
它可能正常运行,但是由于502 Bad gateway,我无法发出请求。
My website works fine locally. 我的网站在本地运作良好。 Im freaking out because I have to launch this site in like a week and I want to test it online first.
我吓坏了,因为我必须在一周左右的时间内启动这个网站,并且我想先在网上对其进行测试。
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.
Thats the error in google chrome console. 多数民众赞成在谷歌浏览器控制台的错误。 The front end site is hosted on AWS S3.
前端站点托管在AWS S3上。 I belive i set the CORS config right in the bucket on AWS.
我相信我在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>
node code set response headers with expess 节点代码使用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();
});
And just incase here is one of my request made in Angular 万一这是我在Angular中提出的要求之一
this.http.post<{userName: string, userId: string, token: string; expiresIn: number, userType: string }>(BACK_END_URL_USER + 'signin', signinData).subscribe(response => {
// some code }
Any help in the right direction would save my life 正确方向的任何帮助都会挽救我的生命
I have since solved this issue. 此后,我已经解决了这个问题。
turns out that the port on my code wasnt up to documentation for AWS's node platform. 原来,我代码上的端口并没有提供给AWS节点平台的文档。
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html
this line in my server.js file. 我的server.js文件中的这一行。
const port = normalizePort(process.env.PORT || "3000");
The port was going to 3000. The PORT variable according to their documentation sets the port to the proper proxy/edge server port but was never doing it in my case. 端口将要达到3000。根据他们的文档,PORT变量将端口设置为正确的代理/边缘服务器端口,但在我的情况下从未使用过。
So I ending up just changing the "or" port to 8081 which fixed my issue! 因此,我最终只是将“或”端口更改为8081,从而解决了我的问题!
const port = normalizePort(process.env.PORT || "8081");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.