I'm currently tackling a Vue.js/Nuxt.js project that involves sending API requests to 'https://app.arianlist.com'. However, I've encountered some CORS challenges and came across this 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."
Here's my Proxy Server setup:
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 up and running at http://localhost:${PORT}`);
});