“访问控制允许来源"指的是“访问控制允许来源".在客户端使用Vue.js和在服务器端使用Express时出现CORS问题 [英] "Access-Control-Allow-Origin" CORS issue when using Vue.js for client side and Express for server side

问题描述

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

I'm trying to make a call to my API on Jazz using Vue.js and Axios, but I am getting the following error:

通过' https://jazz.api.com/api/extra_stuff 起源' http://localhost 的_here'已被CORS策略阻止:对预检请求的响应未通过访问控制检查:否 请求中存在"Access-Control-Allow-Origin"标头 资源.

Access to XMLHttpRequest at 'https://jazz.api.com/api/extra_stuff _here' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

I've been looking at other solutions like https://enable-cors.org/server_expressjs.html or adding

"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调用的代码段:

to my code and it still didn't work. Even if I do the wildcard for the Access-Control-Allow-Origin, I still get the CORS issue and cannot call my API. I am using Vue and Typescript for the client side and managed to get Express working for my server side. Here is a code snippet of my Axios API call:

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:

This is where I am calling my API in this TypeScript file and here is my 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应用程序的.但是任何帮助都会很棒！爵士乐可能有问题吗?

No matter what I seem to do, I cannot figure out this CORS issue. Before I added express to my application, I still got the same issue, thinking that maybe express on the server side would fix the CORS issue. However it didn't help. Beforehand, I was running my Vue application by doing npm run serve. But any help would be great! Could it possibility be an issue with Jazz?

推荐答案

更新:我没有设法解决Axios的CORS问题，但确实设法找到了解决方法.我没有使用Axios库，而是使用fetch来调用API.由于我对请求调用所做的全部工作就是传递参数并根据参数取回数据，因此我的应用程序可以使用fetch进行工作.在进行研究时，我发现使用fetch可能存在问题或局限性?但是，它对我有用，因此我将坚持使用此解决方案.这是我的代码，可供任何人参考:

Update: I didn't manage to fix the CORS issue with Axios, but I did manage to find a workaround for this. Instead of using the Axios library, I am using fetch to call the API. Since all I need to do with my request call is to pass in parameters and get back data based on the parameters, my application works with fetch. While I was doing my research, I saw that there may be issues or limitations using fetch? But hey, it works for me so I'll be sticking with this solution. Here is my code as reference for anyone:

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))

这篇关于“访问控制允许来源"指的是“访问控制允许来源".在客户端使用Vue.js和在服务器端使用Express时出现CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！