将Vue.js用于客户端而Express用于服务器端时出现“Access-Control-Allow-Origin”CORS问题

Question

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

从' http：// localhost '访问来自' https://jazz.api.com/api/extra_stuff _here'的XMLHttpRequest已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否' Access-Control-Allow-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之前，我仍然遇到了同样的问题，认为可能在服务器端表达可能会解决CORS问题。 但它没有帮助。 事先，我通过执行npm run serve来运行我的Vue应用程序。 但任何帮助都会很棒！ 这可能是爵士的问题吗？

Answer 1

您已添加了cors中间件但尚未为OPTIONS请求启用它

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

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

Answer 2

更新：我没有设法修复Axios的CORS问题，但我确实设法为此找到了解决方法。 我没有使用Axios库，而是使用fetch来调用API。 由于我需要执行的所有请求调用是传递参数并根据参数获取数据，因此我的应用程序可以使用fetch 。 在我进行研究时，我发现使用fetch可能存在问题或限制？ 但是，嘿，它适合我，所以我会坚持这个解决方案。 这是我的代码作为任何人的参考：

return fetch('https://dev.jazz.com/api/stuff_goes_here', {
  method: 'post',
  body: JSON.stringify(<request object goes here>)
}).then((res) => res.json())
.then((data) => {
  return data;
}).catch((err)=>console.log(err))