從本地主機 Vue 項目調用 api 時出現 NodeJS CORS 錯誤

Question

我有一個帶有 NodeJS/Express 后端和 VueJS 前端的項目。 我面臨的問題是我不斷收到 CORS 錯誤：

跨域請求被阻止：同源策略不允許讀取位於 https://localhost:8080/api/plot 的遠程資源。 （原因：CORS 請求沒有成功）。

我在 NodeJS 后端的 index.js 文件中添加了 CORS 中間件：

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();
});

我也嘗試過不同的方法：

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

const app = express();

app.use(cors());

在 Vue 項目中，我已將代理添加到我的 vue.config.js 文件中：

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

然后我將 API 調用的 URL 更改為發布 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

首先，當您使用 Webpack Dev 服務器代理時，您不需要使用任何 CORS 配置 Express（假設在生產中您將從同一個 Express 服務器為您的 Vue 應用程序構建提供服務）

您收到 CORS 錯誤的原因是您的應用程序是從http://localhost:8080 （Webpack Dev 服務器）提供的，但是您正在向https://localhost:8080/api/plot發出 Axios 請求 - 重要的部分是HTTPS： //因為瀏覽器僅在協議 + 主機 + 端口都相同時才使用同源策略，所以瀏覽器正在觸發 CORS 預檢請求

只需讓您的 Axios 調用 HTTP 而不是 HTTPS，您應該沒問題...

Answer 2

1. 確保您處理預檢請求（帶有空 204 答案的選項） https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

2. 嘗試添加Access-Control-Expose-Headers https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

允許服務器指示哪些響應標頭應可用於瀏覽器中運行的腳本，以響應跨域請求