Erreur Chrome CORS sur demande au serveur de développement localhost à partir du site distant

Réponse originale

J'ai finalement trouvé la réponse, dans ce RFC À propos de CORS-RFC1918 à partir d'un membre de l'équipe chromée. Pour résumer, Chrome a mis en œuvre CORS-RFC1918 , qui empêche les ressources de réseau public des ressources de réseau public des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources de réseau public des ressources publiques des ressources publiques des ressources du réseau public Demander des ressources en réseaux privés - à moins que la ressource de réseaux publics ne soit sécurisée (HTTPS) et que la ressource de réseaux privés fournit des en-têtes COR appropriés (encore non définis).

Il existe également un drapeau chromé que vous pouvez changer pour désactiver Le nouveau comportement pour l'instant: Chrome: // Flags / # Block-Insecure-Private-Network-Requests

Désactivation que l'indicateur signifie que vous réouverture le trou de sécurité que le nouveau comportement de Chrome est signifié pour fermer.

mise à jour 2021 : Quelques mois après avoir posté cette question, le drapeau que j'ai référencé dans ma réponse originale a été supprimé, et au lieu de désactiver une fonctionnalité de sécurité J'ai été obligé de résoudre le problème de manière plus satisfaisante en servant des actifs sur HTTPS.

Update 2022 : Chrome 98 est sorti, et il présente le support pour Demandes de préfilé . Selon l'annonce, les demandes ratées sont censées produire un avertissement et n'ont aucun autre effet, mais dans mon cas, ce sont des erreurs complètes qui rompent mes sites de développement. J'ai donc dû ajouter du middleware pour enseigner webpack-dev-server comment servir les demandes de premier plan.

Accès au réseau privé (anciennement CORS-RFC1918) est une spécification qui interdit les demandes de ressources de réseau moins privées à des ressources de réseau plus privées. Comme HTTP à HTTPS, ou un hôte distant de LocalHost.

La solution ultime consistait à ajouter un certificat auto-signé et un middleware qui a permis les demandes de mon serveur de développement distant à mon LocalHost webpack-dev- Server pour les actifs.

générer des certificats

module.exports = {
  //...
  devServer: {
    https: {
      key: readFileSync("./.ssl/cert.key"),
      cert: readFileSync("./.ssl/cert.crt"),
      cacert: readFileSync("./.ssl/ca.crt"),
    },

    allowedHosts: ".example.dev", // should match host in origin below
    setupMiddlewares(middlewares, devServer) {
      // Serve OPTIONS requests
      devServer.app.options('*', (req, res) => {
        // Only serve if request has expected origin header
        if (/^https:\/\/example\.dev$/.test(req.headers.origin)) {
          res.set({
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Private-Network": "true",
            // Using * results in error if request includes credentials
            "Access-Control-Allow-Origin": req.headers.origin,
          })

          res.sendStatus(200)
        }
      }

      return middlewares
    }
  }
}

Configurer webpack-dev-server pour utiliser des certificats et servir Demandes de préfilé

cd path/to/.ssl
npx mkcert create-cert

Trust Certificates

1. clic droit ca.crt dans Windows Explorer et sélectionnez Installer le certificat
2. Sélectionnez Utilisateur actuel .
3. Choisissez Placer tous les certificats dans le magasin suivant , puis parcourir ... , et sélectionner Autorités de certification racine de confiance .
4. Finition.

Instructions spécifiques à Firefox

Firefox ne respecte pas votre autoritah! Par défaut. Configurez-le pour le faire avec ces étapes:

1. Type À propos: config dans la barre d'adresse
2. Rechercher security.enterprise_roots.enabled
3. Basculez le paramètre sur true