2

I am currently working on a react app but when I run yarn start. I keep getting this issue Access to XMLHttpRequest at 'https://google.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

'web-preferences': { 'web-security': false }

but the Moesif Orign & CORS Changer extension on chrome helped me bypass it but I am trying to fix it without an extension.

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

I am expecting to bypass this issue with out the Moesif Orign & CORS Changer extension on chrome.

Duke
  • 33
  • 1
  • 3
  • hi @AdamOrlov I added the proxy in package.json ` "devDependencies": { "proxy": "http://localhost:3000"` but I am still having the same issue. 'http://localhost:3000' has been blocked by CORS policy: – Duke Nov 07 '19 at 00:34
  • Does this answer your question? [CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true](https://stackoverflow.com/questions/19743396/cors-cannot-use-wildcard-in-access-control-allow-origin-when-credentials-flag-i) – mrkre Nov 07 '19 at 02:53
  • Not really, I am still having a hard time getting it to work but thanks for trying. – Duke Nov 07 '19 at 13:18
  • You cannot access google.com from your domain, because Google won't allow it. Google would need to return the CORS header, not you. – CherryDT Dec 25 '22 at 16:39

2 Answers2

2

I faced the same problem using expressjs and it's basically the same, here's the code I've used to deal wit 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();
});

hope this helps

AIMEUR Amin
  • 320
  • 1
  • 19
  • HI where do we place this set of codes? – DDM Nov 04 '22 at 09:06
  • on your starting point, most people call it app.js or server.js (ts), doesn't matter what you call it but that code should be before the point where you start your server. check the code on this link https://expressjs.com/en/starter/hello-world.html you may just take the code that I posted (from the comment till the end) and place it in line 4 of the example in that link – AIMEUR Amin Nov 05 '22 at 04:20
0

Run npm i --save cors on the server, then

app.options("*", cors());
app.use(cors());
Andrew T.
  • 4,701
  • 8
  • 43
  • 62
usama sattar
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 06 '22 at 19:39