How can I fix this CORS issue between my website and a site of the same domain?

Question

I have a website, https://example.com which upon load, is supposed to fetch data from another website, https://subdomain.example.com:8080, but apparently, my requests are being blocked. Attached is what I see in the network tab in my browser. The request goes from the browser side to a proxy to the subdomain.example.com. What CORS headers do I need? I'm unfamiliar w/ CORS and I've tried reading the documentation & examples online to no avail.

Answer 1

https://example.com is blocked since it is not allowed at https://subdomain.example.com:8080.

Whoever is owning https://subdomain.example.com:8080 ,he has to add https://example.com in allowed server origin.

https://example.com and https://subdomain.example.com:8080 both are treated different when it comes to CORS.

For example, in nodejs express code, this is how CORS is added and the origin server is allowed.

here in my example http://localhost:8080 will be replaced by https://example.com

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:8080");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

complete code-

const bodyParser = require('body-parser')
const path = require('path');
const express = require('express');
const app = express();
const modelRoute = require('./model');

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

app.use(express.static('dist'));

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:8080");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});


app.get('/api/getData', modelRoute.getData);
app.post('/api/postData', modelRoute.postData);

app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));

There could be two level of CORS enabled one at Nginx side and another on https://subdomain.example.com.

First you need to add below headers in nginx.conf at global level or a local server section. nginx.conf may already have this header then you need add this as well.

add_header Access-Control-Allow-Origin https://example.com;

More importantly, first, you need to see what and how nginx.conf is configured. Based on that you can add this header in /location section as well if CORS is enabled location wise in nginx.conf.

this is one sample

# local node.js server
upstream websocket {
    server 127.0.0.1:3000;
}

server {
    server_name ...;
    # ...;

    # add the header here
    add_header Access-Control-Allow-Origin https://example.com;

    location /path/ {
       
        proxy_hide_header 'Access-Control-Allow-Origin';
    }
}

the request may get block due to other headers as well at nginx side. If above doen not work. You need to see what extra headers nginx.conf have. For exm -

add_header 'Access-Control-Allow-Origin' 'http://api.localhost';
 add_header 'Access-Control-Allow-Credentials' 'true';
 add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
 add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

It would be easy to configure but may require some time to experiment.

You may look into below thread as well. It may help you to understand more.

NGINX Reverse Proxy and Access-Control-Allow-Origin issue

How to enable CORS in Nginx proxy server?

If nginx.conf looks good and still, it does not work then only you jump to subdomain website configuration. It will save your time.