客户端使用Vue.js，服务器端使用Express时的“访问-控制-允许-起源”CORS问题

Question

我试图使用Vue.js和Axios调用我在Jazz上的API，但是我得到了以下错误：

CORS策略阻止从来源“http://jazz.api.com/api/extra_stuff_here”访问“https://jazz.api.com/api/extra_stuff_here”的XMLHttpRequest：对飞行前请求的响应未通过访问控制检查：请求的资源上没有“access-control-allog-origin”标头。

我一直在研究其他解决方案，如https://enable-cors.org/server_expressjs.html或添加

"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Credentials": "true"

我的代码仍然不起作用。即使我为Access-Control-Allow-Origin做了通配符，我仍然会遇到CORS问题，无法调用我的API。我在客户端使用Vue和Typescript，并设法让Express在服务器端工作。下面是我的Axios API调用的代码片段：

return Axios.post('https://jazz.api.com/api/extra_stuff_here', context.getters.getRequest,
        {
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Credentials": "true"
          }
        }
      )

这就是我在这个TypeScript文件中调用API的地方，这里是我的server.js：

var express = require('express');
var path = require('path');
var cors = require('cors');
var bodyParser = require('body-parser');
var morgan = require('morgan');

var app = express();
app.use(morgan('dev'));
app.use(cors());
app.use(bodyParser.json());

var publicRoot = './dist';

//app.use(express.static(path.join(__dirname, '/dist')));
app.use(express.static(publicRoot));

app.get('/', function (req, res) {
    res.sendFile("index.html", { root: publicRoot });
});

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Authorization");
    res.header("Content-Type", "application/json");
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
}); 

app.listen(process.env.PORT || 80, function() {
    console.log("listening on port 80");
});

不管我怎么做，我都搞不清楚这个CORS问题。在我将express添加到我的应用程序之前，我仍然遇到了同样的问题，认为服务器端的express可能会解决CORS问题。然而，这并没有帮助。在此之前，我通过执行npm运行服务来运行我的Vue应用程序。但任何帮助都会很好！这可能是爵士乐的问题吗？

Answer 1

您已经添加了cors中间件，但还没有为选项请求启用它

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

尝试向服务器添加类似的内容以启用它。您可以在express文档中进一步阅读https://expressjs.com/en/resources/middleware/cors.html