Express:由于 accept:application/javascript header 丢失，无法从浏览器访问路由

Question

我是表达新手。我有一个在 express 上运行的 Vue 应用程序。我有一些可以通过浏览器使用 axios 访问的 API 路由。要使用 postman 访问这些路线，我必须有标题:

accept: application/javascript

让它返回实际 API 的结果。如果我不使用这个 header ，我会从 webpack 获取生成的 index.html。我需要根据参数重用这些路由之一来返回 excel/pdf，并通过页面上的链接访问它。

这是我的 server.js - 基于 https://github.com/southerncross/vue-express-dev-boilerplate

import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'
import logger from 'morgan'
import cookieParser from 'cookie-parser'
import bodyParser from 'body-parser'
import webpack from 'webpack'

const argon2 = require('argon2');
const passport = require('passport')
const LocalStrategy = require ('passport-local')
const session = require('express-session')


import history from 'connect-history-api-fallback'

// Formal(Prod) environment, the following two modules do not need to be introduced
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'

import config from '../../build/webpack.dev.conf'

const app = express()
app.set('trust proxy', true)

app.set("view engine", "pug")
app.set('views', path.join(__dirname, 'views'))

app.use ('/', require('./routes'))


app.use(session({
	secret: process.env.SESSION_SECRET || 'secretsauce',
	resave: false,
	saveUninitialized: true
}))


app.use(history())
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
app.use(logger('dev'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
	extended: false
}))
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))

const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath,
	stats: {
		colors: true
	}
}))

app.use(webpackHotMiddleware(compiler))



////////// PASSPORT ///////////////////////
app.use (passport.initialize ());
app.use (passport.session ());

async function authenticateUser (username, password) {
//...
		
}

passport.use (
	new	LocalStrategy (async (username, password, done) => {
		const user = await authenticateUser (username, password)
		if (!user) {
			return done (null, false, {
				message: 'Username and password combination is wrong',
			});
		}

		delete user.password;
		return done (null, user)
	})
);

// Serialize user in session
passport.serializeUser ((user, done) => {
	done (null, user);
});

passport.deserializeUser (function(user, done) {
	if(user === undefined || !user || Object.keys(user).length === 0)
		return done(null, false)
	else
		done (null, user);
});

//////////// passport end ///////////////


app.set("view engine", "pug")
app.use(express.static(path.join(__dirname, 'views')))
app.get('/', function (req, res) {
	res.sendFile('./views/index.html')
})
app.get('/success', function (req, res) {
	res.render('./views/success')
})



app.use ('/api', require('./api'))


// catch 404 and forward to error handler
app.use(function (req, res, next) {
	var err = new Error('Not Found')
	err.status = 404
	next(err)
})

app.use(function (err, req, res) {
	res.status(err.status || 500)
	res.send(err.message)
})




let server = app.listen(80)

export default app

还有一些 api.js

const {Router} = require ('express')
const router = Router()

router.get('/whome', function(req, res){
	logger.info('whome', req.user)
	return res.json(req.user)
})


router.get ('/hello', auth.isAuthenticated, async (req, res) => {
	res.json ({text:'hello'})
})

module.exports = router

我可以使用 accept:application/javascript header 从 postman 调用 http://localhost/api/hello 我得到:

{
    "text": "hello"
}

如预期。但是，如果我从浏览器调用相同的 URL(并且它不发送该 header )，我将获得创建的包 index.html。如何从浏览器访问这些路由？

Answer 1

你有两个选择。

第一个，尝试在你的服务器中添加这个:

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

之前:app.set("view engine", "pug")

如果这不起作用，请尝试在您的 Google Chrome 浏览器 中安装此插件 进行测试。

Allow-Control-Allow-Origin: *

并启用它。 (图标应该是绿色而不是红色)。

为什么会这样？发出的请求称为预检请求。预检请求由浏览器发出，因为 CORS 只是浏览器安全限制 - 这就是它在 Postman 中工作的原因，当然，Postman 不是浏览器。

引用:Preflight request