如何解决全栈应用程序中的 CORS 策略问题 [重复]答案

【问题标题】：How to solve CORS policy issue in a fullstack app [duplicate]如何解决全栈应用程序中的 CORS 策略问题 [重复]
【发布时间】：2020-04-04 16:41:39
【问题描述】：

我正在构建一个 MEVN 堆栈应用程序，但由于跨源策略，我无法从前端向服务器发出请求。我已经为所有路由启用了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))

【问题讨论】：

能否请您附上完整的错误信息？
从源“localhost:3001”访问“localhost:3000/api/banks”的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome , chrome 扩展, https.

标签： express vue.js cors axios

【解决方案1】：

尝试添加：

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

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

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

【讨论】：

感谢您的回答。不幸的是，这正是我已经尝试过的。

【解决方案2】：

尝试改变这个：

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

到这里：

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

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

问题不在于您的服务器。问题是使用localhost:3000 将localhost: 视为一种方案。 'scheme' 是 URL 在第一个冒号之前的位。

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

【讨论】：

你完全正确！我什至没有想到我的实际请求是问题的根源......非常感谢！