How to avoid CORS and SSL errors with localhost?

Question

I'm trying to login with google on my svelte app, by sending a request to an express server, but on Firefox I'm getting a Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:8080/login. (Reason: CORS request did not succeed). Status code: (null). error and on Chrome I get GET https://localhost:8080/login net::ERR_SSL_PROTOCOL_ERROR,

this is my code on express :

"use strict";

import express from "express";
import cors from 'cors';
import { getAllForms } from "./services/get_form";
import { googleLogin } from "./services/auth";

const app = express();

app.use(cors({
  origin: 'https://localhost:3000',
}))

app.get("/login", (req, res) => {
  const auth = googleLogin();
  res.send(auth);
})

app.listen(8080)

and frontend :

<script>
    import HomeDialog from '../components/dialog/HomeDialog.svelte';

    const login = async () => {
        await fetch('https://localhost:8080/login').then((response) => {
            console.log('response', response);
        });
    };
</script>

<svelte:head>
    <title>Jamboit - Create a Game</title>
</svelte:head>

<HomeDialog
    >Create a new Game

    <button on:click={login}> Log in </button>
</HomeDialog>

any tips on how to make this work?

It is possible to use HTTPS with localhost as long as you have configured a TLS certificate and private key for use on the server — NG235, Jul 20 '22 at 05:12
CORS configuration seems fine, but as you don't have a SSL cert for your localhost the OPTIONS request fails ... and thus, the browser won't continue to send the actual request ... — derpirscher, Jul 20 '22 at 09:13
In my case I had to change `localhost` to `127.0.0.1`. Provided your API server is returning CORS correctly, this should work even under plain HTTP. 127.0.0.1 is considered trustworthy as it never leaves the host computer, but `localhost` is not because it could potentially go somewhere else. — rjh, Jan 17 '23 at 21:36

score 1 · Answer 1 · answered Jul 20 '22 at 05:09

You cannot use the https protocol unless your server is setup with HTTPS, a valid certificate, and a valid private key. The certificate does not have to be issued by a public Certificate Authority (i.e. it can be self signed), but it must be trusted by the system. To fix the error, simply change the protocol to http. Make sure that the origin also match with the correct protocol in the CORS configuration; it might need to be http.

Naim Biswas · Answer 2 · 2022-07-20T10:10:03.103

1

app.use(cors())  // only this should works for every case also you can try 

app.use(cors({
  origin: '*' // that will for all like  https / http 
}))

For Specific Origin :

app.use(cors({
  origin: ['your site url','your site url'] // for allowing multiple sites
}))

edited Jul 20 '22 at 10:10

answered Jul 20 '22 at 05:48

Naim Biswas

78
1
6

3

The problem with this is that it will allow Cross Origin Requests from any domain, which is not always ideal in production. If CORS is being utilised for security, this defeats the point. – NG235 Jul 20 '22 at 06:29
Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jul 20 '22 at 09:39
It is not possible to specify multiple origins as an array of strings. You must use custom logic as described in the CORS package docs – NG235 Jul 20 '22 at 10:28

score -3 · Answer 3 · edited Jul 20 '22 at 05:13

I have written this simple guide to explain the main solutions for disabling cross origin restrictions on localhost (and therefore fixing any CORS errors whilst developing your app locally), which I will explain in more detail below.

Use the proxy setting in Create React App

Create React App comes with a config setting which allows you to simply proxy API requests in development. This is available in react-scripts@0.2.3. To do this add the proxy setting to your package.json like this
```
"proxy": "https://cat-fact.herokuapp.com/",
```
Now when you make an API request to https://localhost:3000/api/facts Create React App will proxy the API request to https://cat-fact.herokuapp.com/facts and the CORS error will be resolved.

This is a really simple solution which might not work with more complicated situations where multiple API’s are involved, or certain types of API authentication is needed.
Disable CORS in the browser

You can directly disable CORS in the browser. If you do this, please be aware that you are disabling security restrictions which are there for a reason. I wouldn’t recommend browsing the web with CORS disabled; Just disable it whilst developing your website/app.

Chrome (on Mac): The most reliable way to disable CORS in the latest version of Chrome on Mac (tested on v84) is to run it with web security disabled.

Force quit Chrome by going to the mac menu and pressing “force quit” (or pressing command Q). Then run this command to open Chrome with web security disabled
```
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security
```
Once you’re done developing, restart Chrome and it will go back to normal.

Firefox: The easiest and most reliable way to disable CORS in Firefox is to install the CORS Everywhere plugin.

Safari: The easiest and most reliable way to CORS in Safari is to disable CORS in the develop menu.

Enable the develop menu by going to Preferences > Advanced. Then select “Disable Cross-Origin Restrictions” from the develop menu. Once you’re done developing, restart Safari and it will go back to normal.
Use a proxy to avoid CORS errors

Finally you could use a proxy like cors-anywhere.

This question isn't tagged with [tag:reactjs] so your first point isn't really relevant — Phil, Jul 20 '22 at 05:15

How to avoid CORS and SSL errors with localhost?

3 Answers3