从本地主机 Vue 项目调用 api 时出现 NodeJS CORS 错误

Question

I have a project with a NodeJS/Express backend and a VueJS frontend. The problem I am facing is that I constantly get CORS errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8080/api/plot. (Reason: CORS request did not succeed).

I have added the CORS middelware inside my index.js file of my NodeJS backend:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method',
  );
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
  res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
  next();
});

I also have tried a different approach:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

In the Vue project I have added the proxy to my vue.config.js file:

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '^/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: false,
        pathRewrite: { '^/api': '/api' },
        logLevel: 'debug',
      },
    },
  },
};

Then I have changed the URL of my API call to post 8080:

import axios from 'axios';

export const addPlot = async (plot) => {
  const url = `https://localhost:8080/api/plot`;
  return await axios.post(url, plot).then((res) => {
    console.log(res);
  });
};

Answer 1

First, when you are using Webpack Dev server proxy, you don't need to configure Express with any CORS (assuming in production you are going to serve your Vue app build from the same Express server)

Reason why you getting CORS errors is that your app is served from http://localhost:8080 (Webpack Dev server) but you are making your Axios request to https://localhost:8080/api/plot - important part is HTTPS:// and because browser is using same-origin policy only if protocol + host + port are all same, browser is firing CORS pre-flight request

Just make your Axios calls to HTTP instead of HTTPS and you should be fine...

Answer 2

1. Make sure you processing preflight request (OPTIONS with empty 204 answer) https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

2. Try to add Access-Control-Expose-Headers https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

allows a server to indicate which response headers should be made available to scripts running in the browser, in response to a cross-origin request