Cors Error on Same Domain

CORS error on same domain?

It is only considered to be the same if the protocol, host and port is the same: Same Origin Policy

If you want to enable it you must follow Cross-Origin Resource Sharing (cors) by adding headers. Mozilla has examples

You need to add Access-Control-Allow-Origin as a header in your response. To allow everyone (you should probably NOT do that):

Access-Control-Allow-Origin: *

If you need to support multiple origins (for example both example.com and www.example.com), set the Access-Control-Allow-Origin in your reply to the value of the Origin-header from the request (after you verified that the Origin is white-listed.)

Also note that some requests send a preflight-request, with an OPTION-method, so if you write your own code you must handle those requests too. See Mozilla for examples.

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

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.

CORS error when fetching api from its own domain

If www and non www causing the problems of CORS. Then in my opinion you can set redirection of non WWW URL to WWW URL. It can be achieved using .htaccess or changing some settings on c-panel
Here the related answer Redirect non-www to www in .htaccess

Another option is to set cors headers on server side.

Hope it helps

CORS issue in same domain

if you are using Express, try settings allowed host to enable access control, I had the same issue with django and spent hours trying to figure it out.

app.use(function(req, res, next) {  var allowedOrigins = ['http://localhost:9000'];  var origin = req.headers.origin;  if(allowedOrigins.indexOf(origin) > -1){       res.setHeader('Access-Control-Allow-Origin', origin);  }  res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');  res.header('Access-Control-Allow-Credentials', true);  return next();});

CORS error while loading files from the same domain

CORS cares about the origin of which the domain is only one part.

To be on the same origin each of:

• The scheme
• The full hostname
• The port number

… must match.

Your URLs have different schemes. One is https, the other is http. They are not the same origin.

Generally speaking, you want to be using HTTPS wherever possible. Redirect all requests from your plain HTTP service to HTTPS. That way the HTML page will be served over HTTPS and the origins will match.

How to fix CORS - same domain, Django API and React site

We should never add Access-Control-Allow-Origin as a request header in the frontend code.

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response, therefore it will only give problems, unless the web server has been configured to send an Access-Control-Allow-Headers: Access-Control-Allow-Origin response header.

In short: it is only a response header, not a request one.

Reference: “Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response” despite valid CORS config

---

Related Topics