CORS error on request, with headers and webpack-dev-server proxy configured

Asked
Active3 hr before
Viewed126 times

9 Answers

serverrequesterror
90%

On my webpack.dev.ts configuration file, I configured the webpack proxy property. I configured it like this:,After setting these flags, I left the proxy configuration set on Webpack, as such:,Second, configure the proxy to target the required API on the real backend server:

After setting these flags, I left the proxy configuration set on Webpack, as such:

    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },
load more v
88%

Next step is to create the webpack server configuration using the proxyConfig.,In the below examples, we will examine the different ways of proxying our requests within a react application.,Before examining the below use cases, create a new application using create-react-app which uses webpack-dev-server to start our development server. The webpack-dev-server optionally accepts a proxy object with the necessary structure as defined here. Let us break these steps down to further analyze how React applications using create-react-app handle proxying of requests.

Before examining the below use cases, create a new application using create-react-app which uses webpack-dev-server to start our development server. The webpack-dev-server optionally accepts a proxy object with the necessary structure as defined here. Let us break these steps down to further analyze how React applications using create-react-app handle proxying of requests.

const proxySetting = require(paths.appPackageJson).proxy;
load more v
72%

Most modern browsers enforce SOP and prevent resources from different domain from the one the user is currently on from being executed or accessed, and you’ll see an error like this:,For those who are not familiar with Cross-Origin Resource Sharing (CORS) or Same-Origin Policy (SOP), go take a look at the Wikipedia pages.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

The webpack-dev-server will serve your web app so that you can view it while developing. Needless to say, it should never be used in production environments.,This limits the ability to serve your API from the same port as the front-end, so much so that in order to emulate the ability for your front-end to be able to speak to your API on the same port you would have to use a proxy to route HTTP requests accordingly.,For DEV stage: a webpack-dev-server

Pretag
 Pretag team - issue, fix, solve, resolve
75%

I believe this is no longer an issue. I've included in the webpack configuration:,XMLHttpRequest cannot load http://127.0.0.1:9095/static/5607de95a10c548d52cf.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.,@ddaaggeett still not working

const app = express();
var cors = require('cors')

app.use('/static', express.static(path.join(process.cwd(), '.build')));

app.use(cors())

const bundle = `http://127.0.0.1:9095/static/client.bundle.js`;
const styles = `http://127.0.0.1:9095/static/styles.css`;

app.use('/', (req, res) => {
  res.status(200).send(`<!doctype html>
    <html>
      <head>
        <title>APP</title>
        <link rel="stylesheet" type="text/css" href="${styles}" />
      </head>
      <body>
        <div id='root'></div>
        <script src="${bundle}"></script>
      </body>
    </html>`);
});
load more v
40%

Using the Webpack dev server with a proxy does the following:,Using the Webpack dev server with a proxy is recommended for your local development. Your production version must run from a whitelisted domain using a CORS request andwithout a proxy.,This is a sample script that you can add into your package.json file to start a webpack dev server with a proxy to https://secure.gooddata.com/.

"scripts": {
   "dev": "webpack-dev-server --https --env.gdc="
   https: //secure.gooddata.com/"]},
load more v
22%

Well, if we request a resource in this way, the request succeeds without violating the CORS policy. And if we look closely at the headers of these requests in the network tab of the browser’s developer tools, we can see that they contain a value of Sec-Fetch-Mode: no-cors.,🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.,browser has sent a preflight request to the Tistory server, now Tistory server to send a response to preflight request which browser sent.

console.log(location.origin);
load more v
60%

HTML template is required to serve the bundle, usually it is an index.html file. Make sure that script references are added into HTML, webpack-dev-server doesn't inject them automatically.,If you want to manually recompile the bundle, navigating to the /invalidate route will invalidate the current compilation of the bundle and recompile it for you via webpack-dev-middleware. Depending on your configuration, URL may look like http://localhost:9000/invalidate.,A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, modify your configuration like this:

Pretag
 Pretag team - issue, fix, solve, resolve
48%

No 'Access-Control-Allow-Origin' header is present on the requested resource,Failed to load http://localhost:8080/function/echo: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.,In order to solve this problem, we'll need a reverse proxy to proxy the request from the webpack dev server to the OpenFaas gateway. Luckily, the webpack dev server has a built-in feature for this by taking advantage of the devServer.proxy feature. You can simply write a definition as follows in your webpack configuration:

// URL to the echo function
const url = 'http://localhost:8080/function/echo';

// Sample payload
const data = {
   test: 'test'
};

// AJAX request
fetch(url, {
   body: JSON.stringify(data),
   method: 'POST'
}).then(res => res.json())
load more v

Other "server-request" queries related to "CORS error on request, with headers and webpack-dev-server proxy configured"