webpack serveur de dev de la SCRO problème

Je suis en utilisant webpack-dev-server v1.10.1 pour stimuler mon Redux projet et j'ai les options ci-dessous:

contentBase: `http://${config.HOST}:${config.PORT}`,
quiet: false,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath: configWebpack.output.publicPath,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true}

Dans le JS, je suis en utilisant request de superagent pour générer un appel HTTP GET

request
          .get(config.APIHost + apiUrl)
          .set('Accept', 'application/json')
          .withCredentials()
          .end(function (err, res) {
                if (!err && res.body) {
                    disptach(() => {
                        return {
                            type: actionType || GET_DATA,
                            payload: {
                                response: res.body
                            }
                        }
                    });
                }
          });

Mais j'ai eu de la SCRO erreur:

XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5050' is therefore not allowed access

Toute suggestion pour résoudre ce problème? Merci beaucoup

OriginalL'auteur haohcraft | 2015-07-24

25

Avec webpack-dev-serveur 1.15.X vous pouvez utiliser cette configuration dans votre fichier de config:
```
devServer: {
   contentBase: DIST_FOLDER,
   port: 8888,
   //Send API requests on localhost to API server get around CORS.
   proxy: {
      '/api': {
         target: {
            host: "0.0.0.0",
            protocol: 'http:',
            port: 8080
         },
         pathRewrite: {
            '^/api': ''
         }
      }
   }
},
```
Avec cet exemple vous permettra de rediriger tous les appels de http://0.0.0.0:8888/api/* à http://0.0.0.0:8080/* et de la SCRO résolu

Ce n'est pas de travail pour moi. Obtenez toujours l'exception dire l'Accès pour extraction à 'localhost:8080/api/auth' d'origine 'localhost:9000 "a été bloqué par la SCRO politique: Le "Access-Control-Allow-Origin' en-tête a une valeur 'localhost:7000'. Je intentionaly ajouté 'localhost:7000' back-end. Juste pour vérifier que si le proxy est de travailler sur mon front-end, ce paramètre ne sera pas restreindre mon appel d'api.

OriginalL'auteur gyss
14

Une autre façon de contourner cela est d'ajouter directement les requis de la SCRO en-têtes pour le serveur de dev:
```
devServer: {
  ...
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}
```
Doc liens
Tous les liens à l'endroit où vous l'avez trouvé?
C'est dans le webpack docs: webpack.js.org/configuration/dev-server/#devserver-headers-
Comme pour les en-têtes eux-mêmes, c'est une partie de la spec w3.org/TR/cors

OriginalL'auteur jazmit
5

Vous êtes en cours d'exécution de votre code JavaScript de localhost:5050 mais votre serveur d'API est localhost:8000. Cela est une violation de la même origine, de sorte que le navigateur ne l'autorise pas.

Vous pouvez soit modifier votre API serveur, de sorte que La SCRO est activé, ou suivre les instructions sur la webpack-dev-serveur de page sous "Combinant avec un serveur existant" pour combiner les actifs servant avec webpack-dev-serveur et votre propre serveur d'API.

Le second lien est rompu

OriginalL'auteur Michelle Tilley

Vous devez vous connecter pour publier un commentaire.

Doc liens