[英]Node and Heroku, error: No 'Access-Control-Allow-Origin' header is present on the requested resource
I know this is an usual issue and there are many solutions, however I tried everything and nothing has changed at all.我知道这是一个常见问题,并且有很多解决方案,但是我尝试了一切,但没有任何改变。 I deployed node and postgresql on Heroku to have a Rest API and fetch it from Angular with HttpClient.
I deployed node and postgresql on Heroku to have a Rest API and fetch it from Angular with HttpClient. I have already deployed it and everything works fine with Postman, however in browser, it shows me this error:
我已经部署了它,并且 Postman 一切正常,但是在浏览器中,它向我显示了这个错误:
Access to XMLHttpRequest at 'https://myapi.herokuapp.com/products/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS 策略已阻止从源“http://localhost:4200”访问“https://myapi.herokuapp.com/products/”处的 XMLHttpRequest:不存在“Access-Control-Allow-Origin”Z0995495340EDB3F31请求的资源。
This is my node app:这是我的节点应用程序:
const express = require('express');
const cors = require('cors');
const app = express();
//MiddleWares
app.use(express.json());
app.use(express.urlencoded({extended:false}));
//Router:
app.use(require('./routes/index'));
const PORT = process.env.PORT || 4000;
const corsOptions = {origin: process.env.URL || '*', credentials: true};
app.use(cors(corsOptions));
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*")
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested, Content-Type, Accept Authorization"
)
if (req.method === "OPTIONS") {
res.header(
"Access-Control-Allow-Methods",
"POST, PUT, PATCH, GET, DELETE"
)
return res.status(200).json({})
}
next()
});
app.listen(PORT, err => {
if(err) throw err;
console.log('Server on port 4000');
});
This is my package.json:这是我的 package.json:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node src/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.18.1",
"pg": "^8.7.3"
},
"devDependencies": {
"nodemon": "^2.0.16"
}
}
And Angular:和 Angular:
constructor(
private http: HttpClient
) { }
getAllProducts() {
return this.http.get<Product[]>(`${environment.url_api}/products/`);
}
A browser extension won't help since I will need to deploy the Angular project on a hosting浏览器扩展无济于事,因为我需要在主机上部署 Angular 项目
Thanks for the comments, I already resolved it by removing the cors package and only having a bunch of code for the cors configuration.感谢您的评论,我已经通过删除 cors package 并且只有一堆代码用于 cors 配置来解决它。 My node app ended on this:
我的节点应用程序就此结束:
const express = require('express');
const app = express();
//Cors Configuration - Start
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*")
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested, Content-Type, Accept Authorization"
)
if (req.method === "OPTIONS") {
res.header(
"Access-Control-Allow-Methods",
"POST, PUT, PATCH, GET, DELETE"
)
return res.status(200).json({})
}
next()
})
//Cors Configuration - End
//Router:
app.use(require('./routes/index'));
const PORT = process.env.PORT || 4000;
app.listen(PORT, err => {
if(err) throw err;
console.log('Server on port 4000');
});
As you can see, I didn't use the cors npm package.如您所见,我没有使用cors npm package。 : I got it from this blog https://medium.com/nerd-for-tech/solving-cors-errors-associated-with-deploying-a-node-js-postgresql-api-to-heroku-1afd94964676/
:我从这个博客https://medium.com/nerd-for-tech/solving-cors-errors-associated-with-deploying-a-node-js-postgresql-api-to-heroku-1afd94964676/
I just added a Procfile with the next content: 'web: node src/index.js'.我刚刚添加了一个带有下一个内容的 Procfile:'web: node src/index.js'。 I hope it works for you.
我希望这个对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.