如何修复“ http:// localhost:3000”已被CORS策略阻止:所请求的资源上没有“ Access-Control-Allow-Origin”标头。

时间:2019-11-07 00:04:42

标签: javascript node.js reactjs typescript electron

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

“网络偏好设置”:{         “网络安全”:false     }

但是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扩展程序来绕过此问题。

1 个答案:

答案 0 :(得分:0)

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

希望这会有所帮助