CORS 策略阻止请求,即使访问允许来源设置为 *
Posted
技术标签:
【中文标题】CORS 策略阻止请求,即使访问允许来源设置为 *【英文标题】:CORS Policy blocking request even with Access Allow Origin set to * 【发布时间】:2019-03-30 05:11:50 【问题描述】:尝试在我的网站上调用 POST 时,我在控制台中收到以下错误。 (Angular 前端和 Express 后端都在一个 Docker 容器内)。
从源“https//frontend.mysite.com”访问“https://exp.mysite.com/i_l”处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:否“访问控制允许” -Origin' 标头存在于请求的资源上。
请注意,我在本地 PC 上的设置完全相同,一切正常。
下面是我在 express 端的 server.js 文件是如何为 CORS 配置的:
const path = require('path');
const fs = require('fs');
const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser')
const app = express();
const router = express.Router();
const DIR = './uploads';
let storage = multer.diskStorage(
destination: (req, file, cb) =>
cb(null, DIR);
,
filename: (req, file, cb) =>
cb(null, file.fieldname + '-' + Date.now() + '.' + path.extname(file.originalname));
);
let upload = multer( storage: storage );
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));
app.use(function(req, res, next)
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
next();
);
const PORT = process.env.PORT || 3001;
app.listen(PORT, function ()
console.log('Node.js server is running on port ' + PORT);
);
【问题讨论】:
【参考方案1】:在 Express 服务器上启用 CORS 的更好方法是使用 cors
试试这个。第一:
npm install cors --save
然后:
...
const cors = require('cors')
const app = express();
...
app.use(cors());
...
【讨论】:
感谢您与我们联系——我使用此方法也收到了同样的错误。【参考方案2】:如果要使用 Access-Control-Allow-Credentials,通配符 * 无效。你需要返回具体的ORIGIN:
res.setHeader("Access-Control-Allow-Origin", "https//frontend.mysite.com");
【讨论】:
切换到这个而不是 * 并收到以下内容:CORS Access-Control-Allow-Origin missing。即使我清楚地有: res.setHeader('Access-Control-Allow-Origin', 'frontend.mysite.com'); 协议和端口很重要。你见过浏览器的标题吗?对吗?以上是关于CORS 策略阻止请求,即使访问允许来源设置为 *的主要内容,如果未能解决你的问题,请参考以下文章
“访问 XMLHttpRequest 已被 CORS 策略阻止”即使我已允许所有源/标头/方法
从源 xxxx 访问 XMLHttpRequest ' 被 CORS 策略阻止:对预检的响应。预检请求不允许重定向