How to solve the problem with CORS when using the local server and the webpack dev server with a proxy?

I use a local web server (OpenServer) for website with databases and php with webpack and webpack-dev-server for frontend development. Turning to the local server via proxy webpack dev server:

const webpack = require('webpack');
 const path = require('path');

 module.exports = params => ({
 devServer: {
 contentBase: params.path.public
 publicPath: params.path.publicPath,
 compress: true
 host: params.devServer.host, // anyships.site
 port: params.devServer.port // 3000
 hot: true, 
 headers: {
 'Access-Control-Allow-Origin': '*'
},
 openPage: 'EN',
 proxy: {
 '/': {
 target: params.devServer.proxy.path, // http://anyships.site (port local servers: 80)
 changeOrigin: true,
}
}
},
 plugins: [
 new webpack.HotModuleReplacementPlugin()
]
 });


When opening pages with ajax calls to the database to retrieve data in the browser I get an answer:

5ca0b93e5c699009611248.jpegAccess to XMLHttpRequest at 'anyships.site/EN/matrix/2892' (redirected from 'anyships.site:3000/matrix/2892') from origin 'anyships.site:3000' has been blocked by CORS policy: Response to a preflight request doesn't pass the access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

Please tell me how to configure proxy dev server to remove the lock CORS. Thanks in advance to everyone for the help!
March 19th 20 at 09:24
1 answer
March 19th 20 at 09:26
Solution
In General, he solved the problem! As the saying goes: "the Rescue of drowning - the handiwork of drowning!"

The essence of what I'm doing, I'm just filling in for host:port in the address header in the response from the local server (proxyRes.headers.location) on host:port webpack dev server a and CORS is...nah(forest), as it did not vduplyaet that his naeb... (cheated) ))) and slipped another address.

devServer: {
 contentBase: params.path.public, // Path to root directory, where dev server to request files that are not compiled webpack'om
 // For example: c://web-site-path/public
 publicPath: params.path.publicPath, // Prefix path that will be files from the dev server webpack 
 // Example: '/public/assets/' - files will be available at: http://anyships.site/public/assets/file_name.js
 host: 'anyships.site', // Host webpack dev server a
 port: 3000, // Port a webpack dev server
 hot: true, // Enable auto-reload pages when files
 proxy: { // the Actual proxy settings
 '**': { // At what address webpack dev server a will proxyreverse requests to the local server. 
 // In this case, * * means all addresses to proxy, starting at the root http://anyships.site:3000
 // For example: http://anyships.site:3000/user request http://anyships.site/user (address of the target below)
 target: `http://anyships.site`, // Target address of the local server, which will proxyreverse requests from dev server 
 onProxyRes(proxyRes, req, res) {
 if (proxyRes.headers.location) { // If title to property location (Where to store the full address of the request to the local server)
 let location = proxyRes.headers.location; // save address zogolovka location from the response in a variable location
 console.log(`LOCATION: ${proxyRes.headers.location}`); // Prints to the console address to the replacement
 location = location.replace('anyships.site', 'anyships.site:3000'); // replace localhost to the address of the webpack dev server a
 proxyRes.headers.location = location; // Assign the location header with the spoofed address of variable location
 console.log(`REPLACED: ${proxyRes.headers.location}`); // Prints to the console the address after the replacement
}
}
}
}
},
 plugins: [
 new webpack.HotModuleReplacementPlugin()
 ]


5ca0ffd89decb123739532.jpegI hope my answer will help someone else, but me! )) Good luck everyone!
thanks
The only one - have yet to solve the issue with certificate
https://stackoverflow.com/questions/53369228/can-n...

proxy: {
'/client-config': {
target: 'https://dev-2.MYSERVER.ru/client-config',
secure: false,
- marisol.Corkery commented on March 19th 20 at 09:29
Appreciate it) - charles_McKenz commented on March 19th 20 at 09:32

Find more questions by tags WebpackProxy