The backend API at http://example.ac.uk/sea/ is now proxied by an F5 device which automatically adds the CORS header Access-Control-Allow-Origin: * to all responses. The gui code here appears to automatically add an CORS header Access-Control-Allow-Origin: http://example.ac.uk/sea/ where the value is set to whatever web page is doing the calling. So http://example.ac.uk for the production deployment but if deployed on a different server (e.g. http://example:81/data/sea/app/search) then the value changes (to http://example:81). This means that there are now two Access-Control-Allow-Origin headers in the response which makes browsers (tested in Chrome) refuse to load the data.
Error:
Access to XMLHttpRequest at 'http://example.ac.uk/sea/dataTypes' from origin 'http://seas.example.test' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://seas.example.test, *', but only one is allowed.
These are my response headers:
Response Headers:
Accept-Ranges:
bytes
Access-Control-Allow-Credentials:
true
Access-Control-Allow-Origin:
http://seas.example.test
Access-Control-Allow-Origin:
*
The Access-Control-Allow-Origin: * is being added to the API response by the server it sits behind.
How do I, if possible, remove the Access-Control-Allow-Origin: http://seas.example.test response-header?
Below is my proxy.js implementing express, used in the deployment process. I have tried to remove the Access-Control-Allow-Origin header but to no avail: res.removeHeader('Access-Control-Allow-Origin');
Any help would be greatly appreciated!
var express = require('express');
var cors = require('cors');
var proxy = require('http-proxy-middleware');
var app = express();
app.use(cors());
var proxyFromPath = '/api';
// get angular dev proxy details and re-use
var proxyConfig = require('../../proxy.conf.json');
var apiProxyConfig = proxyConfig[proxyFromPath];
// get proxy override
var proxyOverride = ''; // value replaced in dockerFile
if (proxyOverride === '') {
proxyOverride = process.argv[2];
}
// if proxy override set, use it
if (proxyOverride) {
apiProxyConfig.target = proxyOverride;
}
console.log(`proxy '${proxyFromPath}' => '${apiProxyConfig.target}'`);
app.use(
proxyFromPath,
proxy(apiProxyConfig),
);
// add root response message and link
app.get('/', function (req, res) {
res.removeHeader('Access-Control-Allow-Origin');
res.send(`
Successfully deployed.<br/><br/>
Proxying from '${proxyFromPath}' to '${apiProxyConfig.target}'<br/><br/><br/>
Override this in the manual gitlab 'build_testing_proxy' job (on the master branch) by setting the 'PROXY_TO_URL' variable<br/><br/>
Then don't forget to redeploy by running the 'deploy_testing_proxy' job<br/><br/><br/>
API HERE<br/><br/>
`)
});
app.listen(8080);
You need to allow cross origin requests in the server side. Ex:
app.use(cors({
origin: ['http://seas.example.test']
}));
or you can add the wildcard like below and this should work with the proxy.
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
next();
});
More on this link
I'm new at ReactJS but I'm trying to learn by myself now. I'm facing a problem when I try to add data do may Database, in my RestAPI with MongoDB, using fetch function on my web Application. When I click my button, it runs the following code:
SubmitClick(){
//console.log('load Get User page'); //debug only
fetch('http://localhost:4000/users/', {
method: 'POST',
headers: {
'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: 'deadpool#gmail.com',
first_name: 'Wade',
last_name: 'Wilson',
personal_phone: '(11) 91111-2222',
password: 'wolv3Rine'
})
})
//this.props.history.push('/get'); //change page layout and URL
}
and I get the following message on my browser:
OPTIONS http://localhost:4000/users/ 401 (Unauthorized)
Failed to load http://localhost:4000/users/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Uncaught (in promise) TypeError: Failed to fetch
My RestAPI have Basic Auth, but i don't know what i'm supposed to insert in headers to have access. I got this 'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=', from Postman, when I configured the Authorization tab, and it was automatically added to the headers.
I'm using Google Chrome as my default browser.
My backend code is the following:
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
var basicAuth = require('express-basic-auth')
const app = express();
mongoose.connect('mongodb://localhost/usersregs', { useMongoClient: true });
mongoose.Promise = global.Promise;
app.use(basicAuth({
users: {
'admin': 'supersecret',
'adam': 'password1234',
'eve': 'asdfghjkl'
}
}))
app.use(bodyParser.json());
app.use(function(err, req, res, next){
console.log(err);
//res.status(450).send({err: err.message})
});
app.use(require('./routes/api'));
app.listen(4000, function(){
console.log('Now listening for request at port 4000');
});
It may not be the same problem as the OP, but I was able to get basic auth protected fetches working just by adding a credentials mode...
fetch(
'http://example.com/api/endpoint',
{ credentials: "same-origin" }
)
See here: https://github.github.io/fetch/ under Request > Options
You're trying to access port 4000 (your API, or backend) from port 3000 (Your client). This violates the Same-origin policy, even though you're clearly running both the client and the API from the same machine.
To get around this the easiest way is to just fire up your client from the same port as your API (port 4000) this should allow your host to see that you're trying to access resources from the same domain/port which won't force a preflight request.
If that's not possible you'll have to configure CORS for your API, and this question doesn't give any details about the backend so I can't instruct you on how to do that at the moment.
And of course this approach obviously won't work if you're running two separate servers in production, but that's probably outside of the scope of this question.
I am trying to access an rss feed using an Ajax request on the client broswer.
$.ajax({
type: 'GET',
url: 'http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk',
crossDomain: true,
dataType: 'xml',
success: function(responseData, textStatus, jqXHR) {
console.log(responseData)
},
error: function (responseData, textStatus, errorThrown) {
alert('failed.');
}
});
This is giving me the 'Access-Control-Allow-Origin' error.
I have installed the cors package so it should be enabled on my server, am i missing something?
server.js file
var express = require('express');
var basicAuth = require('express-basic-auth')
var bodyParser = require('body-parser')
var cors = require('cors');
var app = express();
app.use(cors());
app.get('/', function (req, res) {
// res.send('Hello World');
res.sendFile(__dirname + '/views/index.html');
})
var routes = require('./routes');
app.use('/api', routes);
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("App listening at http://%s:%s", host, port)
})
Edit* Full error
XMLHttpRequest cannot load http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.
Because http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk doesn’t send the Access-Control-Allow-Origin response header, you need to instead make the request through proxy. Do that by changing the value of url in your frontend JavaScript code like this:
url: 'https://cors-anywhere.herokuapp.com/http://feeds.bbci.co.uk/news/business/rss.xml?edition=uk',
The https://cors-anywhere.herokuapp.com/http://feeds.bbci.co.uk/… URL will cause the request to go to https://cors-anywhere.herokuapp.com, a open/public CORS proxy which then sends the request on to the http://feeds.bbci.co.uk/… URL you actually want to request.
And when that proxy gets the response, it’ll take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.
That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.
Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.
The reason you need a proxy is that, because http://feeds.bbci.co.uk/… itself doesn’t send the Access-Control-Allow-Origin response header, your browser will refuse to let your frontend JavaScript code access a response from that server cross-origin.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.
I am running my node/express js application on localhost. I am making a 'GET' request to Instagram's api and keep getting this error:
XMLHttpRequest cannot load https://api.instagram.com/oauth/authorize/?client_id=******&redirect_uri=http://localhost:4000/feed&response_type=code.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:4000' is therefore not allowed access.
I make the request in my server like this:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers: x-requested-with");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/',function(req,res){
res.redirect(redirected to feed route);
})
app.get('/feed',function(req,response) {
var code = req.query.code;
var url = "https://api.instagram.com/oauth/access_token";
var options = {
url: url,
method: "POST",
form: {
client_id : clientId,
client_secret : client_secret,
grant_type: 'authorization_code',
redirect_uri: redirect_uri,
code: code
},
json: true
}
request(options, function(err,res,body){
var instagram_response = body;
response.json({access_info:instagram_response});
})
})
Getting data from visiting '/' in my server route works fine. When I call the server '/' route in the client side (when Gallery.html loads) using jQuery like below it gives me the error. Below is the function that runs when gallery.html is loaded in the client side.
$(function(){
$.get("/", function( instagram_reponse, access_token) {
access_token = instagram_reponse.access_token;
})
})
Am I getting this error because my node server is running on localhost? What am I doing wrong?
You need CORS package to be installed on node..
$ npm install cors
var express = require('express')
, cors = require('cors')
, app = express();
app.use(cors());
app.get('/products/:id', function(req, res, next){
res.json({msg: 'This is CORS-enabled for all origins!'});
});
app.listen(80, function(){
console.log('CORS-enabled web server listening on port 80');
});
Configuration Options
origin: Configures the Access-Control-Allow-Origin CORS header. Expects a string (ex: "http://example.com"). Set to true to reflect the request origin, as defined by req.header('Origin'). Set to false to disable CORS. Can also be set to a function, which takes the request origin as the first parameter and a callback (which expects the signature err [object], allow [bool]) as the second. Finally, it can also be a regular expression (/example.com$/) or an array of regular expressions and/or strings to match against.
methods: Configures the Access-Control-Allow-Methods CORS header. Expects a comma-delimited string (ex: 'GET,PUT,POST') or an array (ex: ['GET', 'PUT', 'POST']).
allowedHeaders: Configures the Access-Control-Allow-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Type,Authorization') or an array (ex: ['Content-Type', 'Authorization']). If not specified, defaults to reflecting the headers specified in the request's Access-Control-Request-Headers header.
exposedHeaders: Configures the Access-Control-Expose-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Range,X-Content-Range') or an array (ex: ['Content-Range', 'X-Content-Range']). If not specified, no custom headers are exposed.
credentials: Configures the Access-Control-Allow-Credentials CORS header. Set to true to pass the header, otherwise it is omitted.
maxAge: Configures the Access-Control-Allow-Max-Age CORS header. Set to an integer to pass the header, otherwise it is omitted.
preflightContinue: Pass the CORS preflight response to the next handler.
Refer this for more details https://www.npmjs.com/package/cors
I have a setup involving
Frontend server (Node.js, domain: localhost:3000) <---> Backend (Django, Ajax, domain: localhost:8000)
Browser <-- webapp <-- Node.js (Serve the app)
Browser (webapp) --> Ajax --> Django(Serve ajax POST requests)
Now, my problem here is with CORS setup which the webapp uses to make Ajax calls to the backend server. In chrome, I keep getting
Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
doesn't work on firefox either.
My Node.js setup is:
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
};
And in Django I'm using this middleware along with this
The webapp makes requests as such:
$.ajax({
type: "POST",
url: 'http://localhost:8000/blah',
data: {},
xhrFields: {
withCredentials: true
},
crossDomain: true,
dataType: 'json',
success: successHandler
});
So, the request headers that the webapp sends looks like:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"
And here's the response header:
Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json
Where am I going wrong?!
Edit 1: I've been using chrome --disable-web-security, but now want things to actually work.
Edit 2: Answer:
So, solution for me django-cors-headers config:
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)
This is a part of security, you cannot do that. If you want to allow credentials then your Access-Control-Allow-Origin must not use *. You will have to specify the exact protocol + domain + port. For reference see these questions :
Access-Control-Allow-Origin wildcard subdomains, ports and protocols
Cross Origin Resource Sharing with Credentials
Besides * is too permissive and would defeat use of credentials. So set http://localhost:3000 or http://localhost:8000 as the allow origin header.
If you are using CORS middleware and you want to send withCredential boolean true, you can configure CORS like this:
var cors = require('cors');
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));
Expanding on #Renaud idea, cors now provides a very easy way of doing this:
From cors official documentation found here:
"
origin: Configures the Access-Control-Allow-Origin CORS header.
Possible values:
Boolean - set origin to true to reflect the request origin, as defined by req.header('Origin'), or set it to false to disable CORS.
"
Hence we simply do the following:
const app = express();
const corsConfig = {
credentials: true,
origin: true,
};
app.use(cors(corsConfig));
Lastly I think it is worth mentioning that there are use cases where we would want to allow cross origin requests from anyone; for example, when building a public REST API.
try it:
const cors = require('cors')
const corsOptions = {
origin: 'http://localhost:4200',
credentials: true,
}
app.use(cors(corsOptions));
If you are using express you can use the cors package to allow CORS like so instead of writing your middleware;
var express = require('express')
, cors = require('cors')
, app = express();
app.use(cors());
app.get(function(req,res){
res.send('hello');
});
If you want to allow all origins and keep credentials true, this worked for me:
app.use(cors({
origin: function(origin, callback){
return callback(null, true);
},
optionsSuccessStatus: 200,
credentials: true
}));
This works for me in development but I can't advise that in production, it's just a different way of getting the job done that hasn't been mentioned yet but probably not the best. Anyway here goes:
You can get the origin from the request, then use that in the response header. Here's how it looks in express:
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.header('origin') );
next();
});
I don't know what that would look like with your python setup but that should be easy to translate.
(Edit) The previously recomended add-on is not available any longer, you may try this other one
For development purposes in Chrome, installing
this add on will get rid of that specific error:
Access to XMLHttpRequest at 'http://192.168.1.42:8080/sockjs-node/info?t=1546163388687'
from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the
'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'
when the request's credentials mode is 'include'. The credentials mode of requests
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
After installing, make sure you add your url pattern to the Intercepted URLs by clicking on the AddOn's (CORS, green or red) icon and filling the appropriate textbox. An example URL pattern to add here that will work with http://localhost:8080 would be: *://*
Though we have many solutions regarding the cors origin, I think I may add some missing part. Generally using cors middlware in node.js serves maximum purpose like different http methods (get, post, put, delete).
But there are use cases like sending cookie response, we need to enable credentials as true inside the cors middleware Or we can't set cookie. Also there are use cases to give access to all the origin. in that case, we should use,
{credentials: true, origin: true}
For specific origin, we need to specify the origin name,
{credential: true, origin: "http://localhost:3000"}
For multiple origins,
{credential: true, origin: ["http://localhost:3000", "http://localhost:3001" ]}
In some cases we may need multiple origin to be allowed. One use case is allowing developers only. To have this dynamic whitelisting, we may use this kind of function
const whitelist = ['http://developer1.com', 'http://developer2.com']
const corsOptions = {
origin: (origin, callback) => {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error())
}
}
}
Had this problem with angular, using an auth interceptor to edit the header, before the request gets executed. We used an api-token for authentification, so i had credentials enabled. now, it seems it is not neccessary/allowed anymore
#Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
req = req.clone({
//withCredentials: true, //not needed anymore
setHeaders: {
'Content-Type' : 'application/json',
'API-TOKEN' : 'xxx'
},
});
return next.handle(req);
}
Besides that, there is no side effects right now.
CORS ERROR With NETLIFY and HEROKU
Actually, if none of the above solutions worked for you then you might wanna try this.
In my case, the backend was running on Heroku and the frontend was hosted on netlify.
in the .env file, of the frontend, the server_url was written as
REACT_APP_server_url = "https://ci-cd-backend.herokuapp.com"
and in the backend, all my api calls where written as,
app.get('/login', (req, res, err) => {});
So, Only change you need to do is, add /api at the end of the routes,
so, frontend base url will look like,
REACT_APP_server_url = "https://ci-cd-backend.herokuapp.com/api"
and backend apis should be written as,
app.get('/api/login', (req, res, err) => {})
This worked in my case, and I believe this problem is specifically related when the front end is hosted on netlify.