CORS 策略已阻止从源 URL 访问 URL 的 XMLHttpRequest [重复]

Posted 2023-02-27

【中文标题】CORS 策略已阻止从源 URL 访问 URL 的 XMLHttpRequest [重复]

【英文标题】：Access to XMLHttpRequest at URL from origin URL has been blocked by CORS policy [duplicate]

【发布时间】：2020-01-05 12:02:10

【问题描述】：

我正在尝试为我的前端处理 CORS。在我的本地主机（开发环境）上，给定的 cors 工作正常。但是当我将应用程序部署到heroku 时，它会给出给定的错误。

Access to XMLHttpRequest at 'myHerokuURL' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

这是我正在使用的 CORS。

app.use(function (req, res, next) 
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Authorization, x-auth-token, content-type');
    res.setHeader('Access-Control-Allow-Credentials', false);
    next();
  ); 

【问题讨论】：

我的答案已更新。请检查。

【参考方案1】：

您需要在 app.js 主文件中设置路由之前设置 cors。

npm i --save cors

此外，您可以将 cors 设置为根据您的环境模式（例如 development 或 production）自动更改

以下是我通常如何设置 cors 的示例：

var corsUrl;

if (process.env.NODE_ENV === 'development') 
  corsUrl = process.env.LOCAL_URL  // http://localhost:8080
 else if (process.env.NODE_ENV === 'production') 
  corsUrl = process.env.DEPLOY_URL // http://myapp.com


app.use(cors(
  origin: corsUrl
))

注意：使用 https://myapp.com - 如果您在服务器上强制使用安全协议。

然后设置路线

app.use('/', indexRoutes)
admin.use('/', adminRoutes)

Cors 文档 - https://www.npmjs.com/package/cors 希望这会有所帮助。

【参考方案2】：

你需要像下面这样添加cors，

const cors = require('cors');
app.use(cors());