[英]CORS error in nodejs app deployed on heroku using with angular 9
Server.js Code: Server.js 代码:
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
const db = require('./DB/db');
const routes = require('./api/routes/routes');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cors({
origin: '*'
}));
routes(app);
app.listen(PORT, () => {
console.log(`Server started at ${PORT}`);
});
package.json file: package.json 文件:
{
"name": "LMS_Backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"joi": "^14.3.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.11",
"nodemailer": "^6.4.6"
}
}
Angular service file: Angular服务文件:
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
const baseUrl = 'https://lmspreject-1.herokuapp.com/api/lms_project';
// const baseUrl = 'http://localhost:3000/api/lms_project';
@Injectable({
providedIn: 'root',
})
export class AdminServiceService {
constructor(private http: HttpClient) {}
register(adminDetails) {
console.log(adminDetails);
let headers = new HttpHeaders({
'Content-Type': 'application/json',
'Accept': 'application/json'
});
let options = {
headers: headers,
};
return this.http.post(`${baseUrl}/admin/register`, adminDetails, options);
}
}
Error:错误:
Access to XMLHttpRequest at ' https://lmspreject-1.herokuapp.com/api/lms_project/admin/register ' from origin ' http://localhost:4200 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Access to XMLHttpRequest at ' https://lmspreject-1.herokuapp.com/api/lms_project/admin/register ' from origin ' http://localhost:4200 ' has been blocked by CORS policy: No 'Access-Control-Allow -Origin' header 存在于请求的资源上。
Note: It works fine I run the app on the localhost but gives error on Heroku URL.注意:它工作正常我在本地主机上运行应用程序,但在 Heroku URL 上出现错误。
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.跨域资源共享 (CORS) 是一种机制,它使用额外的 HTTP 标头来告诉浏览器让 web 应用程序在一个来源运行,访问来自不同来源的选定资源。
You can do a CORS request from a HTTPS domain to another HTTPS domain.您可以从 HTTPS 域向另一个 HTTPS 域发出 CORS 请求。 If you do http requests to call your https server, it is considered insecure an considered as force request to your server with tampered data.
如果您执行 http 请求来调用您的 https 服务器,则它被认为是不安全的,并被视为使用篡改数据向您的服务器发出强制请求。
Here,as I can see you are trying to access https server from your local http that's why you are getting an CORS issue.在这里,我可以看到您正在尝试从本地 http 访问 https 服务器,这就是您遇到 CORS 问题的原因。
Regarding CORS, localhost behaves quite differently than remote origins, this can be very confusing.关于 CORS,localhost 的行为与远程来源完全不同,这可能会非常令人困惑。
I suspect that you didn't enable the CORS pre-flight OPTIONS endpoint.我怀疑您没有启用 CORS 飞行前 OPTIONS 端点。 Your request is using a JOSN content type and therefore is not a "simple" cors request .
您的请求使用的是 JOSN 内容类型,因此不是“简单”的 cors 请求。 It will be automatically preceded by an OPTION preflight request from the browser.
它将自动在浏览器发出 OPTION 预检请求之前。 Your server should be able to respond to that request.
您的服务器应该能够响应该请求。
See here how to enable it - https://www.npmjs.com/package/cors#enabling-cors-pre-flight请参阅此处如何启用它 - https://www.npmjs.com/package/cors#enabling-cors-pre-flight
Do:做:
npm i --save cors
Add app.use(cors())
in server.js
file.在
server.js
文件中添加app.use(cors())
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.