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

Posted 2023-03-04

【中文标题】将 Vue.js 用于客户端，将 Express 用于服务器端时出现“Access-Control-Allow-Origin”CORS 问题

【英文标题】："Access-Control-Allow-Origin" CORS issue when using Vue.js for client side and Express for server side

【发布时间】：2019-05-21 12:15:18

【问题描述】：

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

在 'https://jazz.api.com/api/extra_stuff 访问 XMLHttpRequest _here' from origin 'http://localhost' 已被 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 调用的代码 sn-p：

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 run serve 来运行我的 Vue 应用程序。但任何帮助都会很棒！有没有可能是 Jazz 的问题？

【问题讨论】：

***.com/a/38500226/5188835 - 试试这个解决方案。

@CheezyCode 刚刚尝试过，但仍然没有运气.. 仍然遇到 CORS 问题..

从他们不属于那里的客户端代码中删除 Access-Control-* 标头，并且不会改变服务器将如何处理 cors

另外你没有在你的 express 代码中定义一个 post() 路由，只有一个 use() 和一个 get()

@PatrickEvans 好的，我删除了它！当然，我仍然遇到同样的问题 - 有什么解决办法吗？

【参考方案1】：

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

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

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

【讨论】：

我不知道我必须这样做。我刚刚尝试过，但没有运气。我仍然遇到相同的 CORS 问题。我现在想知道它是否与爵士乐有关？

【参考方案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))

【讨论】：

如果 Axios 没有，如何获取可能的工作？他们不是在幕后做同样的事情吗？