Question

我正在构建MEVN-stack应用程序，但是由于跨源策略，我无法从前端发送请求到服务器。我已经为所有路由启用了cors中间件，但是它没有生效。我还尝试将其分别应用于每条路线并指定起点，但仍然无效。

index.js：

const express = require('express')
const cors = require('cors')
const mongoose = require('mongoose')
const BanksController = require('./controllers/BanksController')
const OfficesController = require('./controllers/OfficesController')

const PORT = process.env.PORT || 3000
mongoose.connect(process.env.DB, { useNewUrlParser: true, useUnifiedTopology: true });

const app = express()

app.use(cors({ origin: 'http://localhost:3001' }))

app.get('/api/banks', BanksController.index)
app.get('/api/offices', OfficesController.index)

app.listen(PORT, () => console.log('Listening on port ' + PORT))

ajax请求：

axios.get('localhost:3000/api/banks')
          .then(res => console.log(res))
          .catch(err => console.log(err))

Answer 1

尝试添加：

app.use(cors({ origin: 'http://localhost:3001/*' }))

将为所有路由启用。或者只是使用：

app.use(cors())
app.options('*', cors());

Answer 2

尝试更改此内容：

axios.get('localhost:3000/api/banks')

对此：

axios.get('http://localhost:3000/api/banks')

请注意错误消息如何抱怨协议方案。

问题不是您的服务器。问题是使用localhost:3000会将localhost:视为一个方案。 “方案”是第一个冒号之前的URL位。

您甚至不会在开发人员工具的“网络”部分中看到该请求，因为浏览器不知道如何发出localhost:“请求”。

如何在全栈应用中解决CORS政策问题

2 个答案: