Node和Heroku,错误:no' access-control-allow-holy-origin'标题存在于请求的资源上

发布于 2025-01-27 05:21:54 字数 1934 浏览 1 评论 0原文

我知道这是一个通常的问题,有很多解决方案,但是我尝试了一切,什么也没有改变。 我在Heroku上部署了节点和PostgreSQL,以使用REST API,并使用HTTPCLCLIENT从Angular中获取它。我已经部署了它,一切都可以与Postman配合使用,但是在浏览器中,它向我显示了一个错误:

访问'https://myapi.herokuapp.com/producps/froment'http'http:// http:/// “访问控制”标题。

这是我的节点应用:

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');
});

我的软件包。

{
  "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"
  }
}

这是

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>(`${environment.url_api}/products/`);
  }

Localhost:4200'已被CORS策略阻止:在请求的资源上没有 浏览器扩展无济于事,因为我需要在主机上部署角度项目

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 have already deployed it and everything works fine with Postman, however in browser, it shows me this error:

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.

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:

{
  "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:

  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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

浅忆 2025-02-03 05:21:55

我刚刚添加了一个带有下一个内容的procfile:'Web:Node SRC/index.js'。
我希望它对您有用。

I just added a Procfile with the next content: 'web: node src/index.js'.
I hope it works for you.

日久见人心 2025-02-03 05:21:55

感谢您的评论,我已经通过删除CORS软件包而解决了它,并且只有一堆用于CORS配置的代码。我的节点应用程序以此结束:

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');
});

如您所见,我没有使用CORS NPM软件包。 :
我从这个博客 https://medium.com/nerd-for-tech/solving-cors-errors-errors-errors-aserors-absived-with-with-deploying-a-node-node-node-js-js-postgres-postgresql-api-api-api-to-heroku -1AFD94964676/

Thanks for the comments, I already resolved it by removing the cors package and only having a bunch of code for the cors configuration. 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. :
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/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文