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?

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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.

1. 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 [email protected]. 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.

2. 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.

3. Use a proxy to avoid CORS errors

   Finally you could use a proxy like cors-anywhere.