0

so I am having this weird issue. I have an application with Node/Angular hosted on the server, working on the same port. But only on one page, there is a CORS error.

So far, I have added allowed CORS before the routes in the app.js.

CODE:

const apiRoutes = require("./routes/api");

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With, cache-control"
  );
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET,POST,PATCH,DELETE,OPTIONS,PUT"
  );
  next();
})

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/uploads', express.static(path.join(__dirname, './uploads')));

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

I have also used the cors npm package and allowed it with that as well, but still no luck.

The request parameters of getting the same image from the same directory are attached.

Response param when the image is accessed on page 1

Response param when the same image is blocked CORS

Image for error

EDIT:

const cors = require('cors');
app.use(cors());
app.options('*', cors());

I have also used this, but it doesn't work either.

Request from same origin is getting blocked,

Access to image at 'https://www.pay2mate.com/uploads/1579836295281-Affinity_Logo.png' from origin 'https://pay2mate.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Abbas Afzal
  • 131
  • 2
  • 7
  • 2
    Does this answer your question? [Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?](https://stackoverflow.com/questions/7067966/why-doesnt-adding-cors-headers-to-an-options-route-allow-browsers-to-access-my) – Basel Issmail Feb 17 '20 at 00:07
  • Are `www.pay2mate.com` and `pay2mate.com` actually the same server? If so, why don’t you just run your frontend app from `www.pay2mate.com` rather than `pay2mate.com`? If you did that, they’d be same-origin, and you’d not need to CORS-enable the server. – sideshowbarker Feb 17 '20 at 01:33
  • @sideshowbarker Thank you so much. I have been stuck in this for like 2 days now. – Abbas Afzal Feb 17 '20 at 01:43

1 Answers1

0

Based on your error;

Access to image at 'https://www.pay2mate.com/uploads/1579836295281-Affinity_Logo.png' from origin 'https://pay2mate.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

You may have confused the difference between your NodeJS API and the web server itself.

As your code shows the image you are requesting is being served by Apache (the web server) and not by your NodeJS API;

URL: https://www.pay2mate.com/uploads/1579836295281-Affinity_Logo.png
server: Apache
accept-ranges: bytes
content-length: 5774
content-type: image/png
date: Mon, 17 Feb 2020 01:41:59 GMT
etag: "69c3450-168e-59cda4d2ef8f3"
last-modified: Fri, 24 Jan 2020 03:24:55 GMT
status: 200

You will either need to direct all requests to your API in your .htaccess file regardless of whether the physical file exists and then stream the file through your API.

Or, you could update your .htaccess file to add this header for you which will then appear on file requests (if you want this wide open like your example);

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

You can read more about this here; https://enable-cors.org/server_apache.html

If this does not work. Please post more information about your hosting server configuration & the contents of your current .htaccess file

Ralpharoo
  • 789
  • 9
  • 21