时间戳

首页 > 解决方案 > 如何解决全栈应用程序中的 CORS 策略问题

express - 如何解决全栈应用程序中的 CORS 策略问题

问题描述

我正在构建一个 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))

标签： expressvue.jscorsaxios

解决方案

尝试改变这个：

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

对此：

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

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

问题不在于您的服务器。问题是使用localhost:3000Treatslocalhost:作为一种方案。“方案”是第一个冒号之前的 URL 位。

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

推荐阅读