如何修复“http://localhost:3000”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。答案

【问题标题】：How to fix ''http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.'如何修复“http://localhost:3000”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。
【发布时间】：2020-03-03 12:39:02
【问题描述】：

我目前正在开发一个 react 应用程序，但是当我运行 yarn start 时。我不断收到此问题访问来自源“http://localhost:3000”的“https://google.com/”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

'网络偏好'：{ “网络安全”：假 }

但 chrome 上的 Moesif Orign & CORS Changer 扩展帮助我绕过它，但我试图在没有扩展的情况下修复它。

    const electron = require("electron");
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    const path = require("path");
    const isDev = require("electron-is-dev");
    let mainWindow;
    let createWindow=()=> {
    mainWindow = new BrowserWindow({ width: 900, height: 680 });
    mainWindow.loadURL(
    isDev
    ? "http://localhost:3000"
    : `file://${path.join(__dirname, "../build/index.html")}`
    );
    mainWindow.on("closed", () => (mainWindow = null));
    }
    app.on("ready", createWindow);
    app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
    app.quit();
    }
    });
    app.on("activate", () => {
    if (mainWindow === null) {
    createWindow();
    }
    });

我希望在 Chrome 上没有 Moesif Orign 和 CORS Changer 扩展的情况下绕过这个问题。

【问题讨论】：

嗨@AdamOrlov 我在package.json `"devDependencies": { "proxy": "localhost:3000"` 中添加了代理，但我仍然遇到同样的问题。 'localhost:3000' 已被 CORS 策略阻止：
这能回答你的问题吗？ CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true
不是真的，我仍然很难让它工作，但感谢您的尝试。

标签： javascript node.js reactjs typescript electron

【解决方案1】：

我在使用 expressjs 时遇到了同样的问题，基本上是一样的，这是我用来处理 CORS 的代码

const express = require('express')

const app = express()

// Defining CORS
app.use(function(req, res, next) {
    res.setHeader(
      "Access-Control-Allow-Headers",
      "X-Requested-With,content-type"
    );
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
      "Access-Control-Allow-Methods",
      "GET, POST, OPTIONS, PUT, PATCH, DELETE"
    );
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
});

希望对你有帮助

【讨论】：