CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
faeze.fd
faeze.fd

Reputation: 11

CORS issue: "Response to preflight request doesn't pass access control check"

I'm working on a Vue.js/Nuxt.js project where I'm making API requests to 'https://app.arianlist.com'. However, I'm facing CORS issues, and I've received the following error message:

"Access to XMLHttpRequest at 'https://app.arianlist.com/api/public/items/index/book' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

My Proxy Server:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
const PORT = 3000;

const apiProxy = createProxyMiddleware('/api', {
  target: 'https://app.arianlist.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
  onProxyRes: function (proxyRes, req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
  },
});

app.use('/api', apiProxy);

app.listen(PORT, () => {
  console.log(`Proxy server is running on http://localhost:${PORT}`);
});

Upvotes: 1

Views: 623

Answers (1)

Quentin
Quentin

Reputation: 944149

The error message says:

Access to XMLHttpRequest at 'https://app.arianlist.com/api/public/items/index/book'

So the browser is making an HTTP request directly to https://app.arianlist.com/api/public/items/index/book and is not using your proxy.

You need to change the browser-side code so it uses the URL of your proxy.

You should also note that if a preflight is being made then there will be additional CORS headers required in the response (what they are will depend on why a preflight is requested and will be expressed in the request headers for the preflight OPTIONS request). Access-Control-Allow-Origin by itself will not be sufficient, and the wildcard value may be forbidden for it.

Upvotes: 2

Related Questions