WebPack serwer dev CORS problem

Question

Używam webpack-dev-server v1.10.1 aby zwiększyć swój projekt Redux i mam z poniższych opcji:

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} 

W JS, używam request od superagent wygenerować HTTP GET zadzwonić

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

Ale mam błąd CORS:

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 

Wszelkie Sugg estion, aby rozwiązać ten problem? Wielkie dzięki

Answer 1

Używasz JavaScript od localhost:5050, ale twój serwer API to localhost:8000. Narusza to tę samą zasadę pochodzenia, więc przeglądarka go ignoruje.

Możesz zmodyfikować swój serwer API tak, aby CORS is enabled, lub wykonaj the instructions on the webpack-dev-server page w "Łączenie z istniejącym serwerem", aby połączyć obsługę zasobów z serwerem webpack-dev i własnym serwerem API.

Answer 2

Z WebPACK-dev-serwer 1.15.X można użyć tej konfiguracji w pliku konfiguracyjnym:

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': '' 
     } 
     } 
    } 
}, 

Z tego przykładu można przekierować wszystkie połączenia z http://0.0.0.0:8888/api/* do http://0.0.0.0:8080/* i CORS rozwiązany

Answer 3

Another sposobem obejścia tego jest bezpośrednie dodanie wymaganych serwerów CORS do serwera 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" 
    } 
}