Question

express cors我遇到了一个奇怪的问题。我的Cors配置在localhost上工作正常，但它不能用于生产。我总是收到这个错误。

无法加载 https://my-movie-db-backend-roberto.herokuapp.com/auth/login：回复预检请求未通过访问控制检查：否请求中存在“Access-Control-Allow-Origin”标头资源。来源'https://my-movie-db-roberto.herokuapp.com'是因此不允许访问。响应具有HTTP状态代码503。如果不透明响应满足您的需求，请将请求的模式设置为 'no-cors'在禁用CORS的情况下获取资源。

这是我的角色配置：

import * as cors from "cors";
const corsConfig: cors.CorsOptions = {
    origin: ["https://my-movie-db-roberto.herokuapp.com", "http://localhost:3000"],
    credentials: true,
    methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE"
};

app.use(cors(corsConfig));

// add your routes
<MY-Routes>

// enabling pre-flight
app.options("*", cors(corsConfig));

我已经有一段时间了，我决定寻求帮助会更好，谢谢; - ）

Answer 1

显然问题根本就不在于他们的问题。由于一些丢失的软件包被认为是dev依赖项而Heroku没有安装它们，因此后端服务器处于脱机状态。只需更改Heroku上的isProduction标志，现在一切正常。

Answer 2

我尝试复制设置，发现如果原点不在允许的来源列表中，cors库似乎不会发送Access-Control-Allow-Origin标题。

因此，请确保您在该选项的条目中没有任何拼写错误，或尝试使用＆＃34; *＆＃34;首先，然后再进行第二步。

以下是我使用的代码：

服务器端

var express = require('express')
var cors = require('cors')

const app = express()

const corsConfig = {
    origin: ["http://testing.local", "https://my-movie-db-roberto.herokuapp.com", "http://localhost:3000"],
    credentials: true,
    methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE",
    allowedHeaders: ['Content-Type']
};

app.use(cors(corsConfig));
enter code here

// add your routes
app.post('/', (req, res) => res.send('yay'));

// enabling pre-flight
app.options("*", cors(corsConfig));
app.listen(8080, () => console.log('serving...'))

客户（http://testing.local）：

fetch('http://localhost:8080/', {
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' }
})
.then(r => r.text())
.then(console.log)

cors在localhost上工作但不在生产上

2 个答案: