如何在 Heroku 上使用我的 Angular 应用程序解决 CORS 问题

Posted 2023-03-04

【中文标题】如何在 Heroku 上使用我的 Angular 应用程序解决 CORS 问题

【英文标题】：How to solve CORS problem with my Angular App on Heroku

【发布时间】：2020-05-27 12:22:48

【问题描述】：

对不起，如果我的问题已经有答案了..但我已经做了所有并且无法解决它......

我在 heroku 上托管了 2 个项目，一个用 angular 制作的前端和一个用 java（spring boot）制作的登录后端。问题是当我尝试登录时，我遇到了 CORS 问题

No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我使用 Postman 请求我的 springboot 服务器时，它通常可以工作...

另外，这是我用于 heroku 部署的 server.js

const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();

app.use(cors());

app.use(express.static('./dist/fonetApp'));

app.get('/',function(req,res)
    res.sendFile(path.join(__dirname+'/dist/fonetApp/index.html'));
);

app.listen(process.env.PORT || 8080);

拜托..帮助t_t

【参考方案1】：

我使用cors在heroku上解决了同样的问题

const express = require('express');
const path = require('path');
const cors = require('cors');

const app = express();

// add this code
const whitelist = ['http://localhost:3000']; // list of allow domain

const corsOptions = 
    origin: function (origin, callback) 
        if (!origin) 
            return callback(null, true);
        

        if (whitelist.indexOf(origin) === -1) 
            var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
            return callback(new Error(msg), false);
        
        return callback(null, true);
    


// end 
app.use(cors(corsOptions));

app.use(express.static('./dist/fonetApp'));

app.get('/',function(req,res)
    res.sendFile(path.join(__dirname+'/dist/fonetApp/index.html'));
);

app.listen(process.env.PORT || 8080);