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.
Related
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 have already set cors on the backend , I just dont know why I am receiving 404 error when the url is correct. The error is Access to XMLHttpRequest at 'http://localhost:3008/api/vehicle' from origin 'http://localhost:3007' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. I have also added my api cross domain below. please check the sample code below.What would be the solution to this problem ? what causes this issues ?I have already set cors on the backend , I just dont know why I am receiving 404 error when the url is correct. The error is Access to XMLHttpRequest at 'http://localhost:3008/api/vehicle' from origin 'http://localhost:3007' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. I have also added my api cross domain below. please check the sample code below.What would be the solution to this problem ? what causes this issues ?
Any idea?
Http post service
save(vehicle: Vehicle){
return this.http.post(
CONSTANST.routes.person.save,
{
Stock: vehicle.Stock,
VIN: vehicle.VIN,
age: vehicle.age,
gender: vehicle.gender,
},
);
}
routes
const HOST ='http://localhost:3008'
export const CONSTANST = {
permissions:{},
routes:{
authorization:{
login: HOST + '/api/app/signin-email',
logout: HOST + '/api/auth/logout'
},
person:{
list: HOST + '/api/vehicle',
save: HOST + '/api/vehicle',
},
user: {}
},
lang:{},
session:{},
parameters:{}
};
api cross domain request
if (process.env.NODE_ENV !== 'production') {
console.log('------------------------------------------------');
console.log('Notice: Enabling CORS for development.');
console.log('------------------------------------------------');
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
}
api routes
app.get('/api/vehicle', keystone.middleware.api, routes.api.vehicle.list);
app.post('/api/vehicle', keystone.middleware.api ,routes.api.vehicle.create);
In your case url can be correct, but you have no configured handler for "OPTIONS" requests method in your api routes. It should be configured like you do it for GET or POST requests. And as result you receiving 404 response on your preflight requests.
app.options('/api/vehicle', keystone.middleware.api ,routes.api.vehicle.create);
But you do not need pass there your callback with logic because you will execute your logic twice.
In addition i can advice you to do one options handler for all your routes:
app.options('*', someSimpleCallback);
In my case I was missing a trailing slash after the id of object I wanted to delete.
If you're using Django Rest Framework for backend, ensure that you've set the ALLOWED_HOSTS. You may also want to use django-cors-headers app.
I am sending requests from the client to my Express.js server using Axios.
I set a cookie on the client and I want to read that cookie from all Axios requests without adding them manually to request by hand.
This is my clientside request example:
axios.get(`some api url`).then(response => ...
I tried to access headers or cookies by using these properties in my Express.js server:
req.headers
req.cookies
Neither of them contained any cookies. I am using cookie parser middleware:
app.use(cookieParser())
How do I make Axios send cookies in requests automatically?
Edit:
I set cookie on the client like this:
import cookieClient from 'react-cookie'
...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
axios.get('path/to/my/cookie/api').then(response => {
if(response.status == 200){
cookieClient.save('cookie-name', response.data, {path:'/'})
}
})
}
...
While it's also using Axios, it is not relevant to the question. I simply want to embed cookies into all my requests once a cookie is set.
You can use withCredentials property.
XMLHttpRequest from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request.
axios.get(BASE_URL + '/todos', { withCredentials: true });
Also its possible to force credentials to every Axios requests
axios.defaults.withCredentials = true
Or using credentials for some of the Axios requests as the following code
const instance = axios.create({
withCredentials: true,
baseURL: BASE_URL
})
instance.get('/todos')
TL;DR:
{ withCredentials: true } or axios.defaults.withCredentials = true
From the axios documentation
withCredentials: false, // default
withCredentials indicates whether or not cross-site Access-Control requests should be made using credentials
If you pass { withCredentials: true } with your request it should work.
A better way would be setting withCredentials as true in axios.defaults
axios.defaults.withCredentials = true
It's also important to set the necessary headers in the express response. These are those which worked for me:
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', yourExactHostname);
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
I am not familiar with Axios, but as far as I know in javascript and ajax there is an option
withCredentials: true
This will automatically send the cookie to the client-side. As an example, this scenario is also generated with passportjs, which sets a cookie on the server
So I had this exact same issue and lost about 6 hours of my life searching, I had the
withCredentials: true
But the browser still didn't save the cookie until for some weird reason I had the idea to shuffle the configuration setting:
Axios.post(GlobalVariables.API_URL + 'api/login', {
email,
password,
honeyPot
}, {
withCredentials: true,
headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
}});
Seems like you should always send the 'withCredentials' Key first.
You can use withCredentials property to pass cookies in the request.
axios.get(`api_url`, { withCredentials: true })
By setting { withCredentials: true } you may encounter cross origin issue. To solve that
you need to use
expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));
Here you can read about withCredentials
What worked for me:
Client Side:
import axios from 'axios';
const url = 'http://127.0.0.1:5000/api/v1';
export default {
login(credentials) {
return axios
.post(`${url}/users/login/`, credentials, {
withCredentials: true,
credentials: 'include',
})
.then((response) => response.data);
},
};
Note: Credentials will be the body of the post request, in this case the user login information (Normally obtained from the login form):
{
"email": "user#email.com",
"password": "userpassword"
}
Server Side:
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT || 5000;
app.use(
cors({
origin: [`http://localhost:${port}`, `https://localhost:${port}`],
credentials: 'true',
})
);
Fatih's answer is still valid and great in 2022.
Also axios.defaults.withCredentials = true will do the trick.
It seems passing { withCredentials: true } to individual axios calls is deprecated.
How do I make Axios send cookies in requests automatically?
set axios.defaults.withCredentials = true;
or for some specific request you can use axios.get(url,{withCredentials:true})
this will give CORS error if your 'Access-Control-Allow-Origin' is set to
wildcard(*).
Therefore make sure to specify the url of origin of your request
for ex: if your front-end which makes the request runs on localhost:3000 , then set the response header as
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
also set
res.setHeader('Access-Control-Allow-Credentials',true);
for people still not able to solve it, this answer helped me.
stackoverflow answer: 34558264
TLDR;
one needs to set {withCredentials: true} in both GET request as well the POST request (getting the cookie) for both axios as well as fetch.
Another solution is to use this library:
https://github.com/3846masa/axios-cookiejar-support
which integrates "Tough Cookie" support in to Axios. Note that this approach still requires the withCredentials flag.
After trying for 2 days long and after trying out from the suggestions here this is what worked for me.
express:
cors: cors({ origin: "http:127.0.0.1:3000", credentials: true, })
Cookie : Make sure your cookie has secure: true, sameSite: "None"
Frontend(React)
axios.defaults.withCredentials = true;
(withCredentials : true did not work for me) to the places where you request the cookie as well as to the place where you send the cookie (GET/POST)
Hope this helps others as well.
You are getting the two thinks mixed.
You have "react-cookie" and "axios"
react-cookie => is for handling the cookie on the client side
axios => is for sending ajax requests to the server
With that info, if you want the cookies from the client side to be communicated in the backend side as well, you will need to connect them together.
Note from "react-cookie" Readme:
Isomorphic cookies!
To be able to access user cookies while doing server-rendering, you
can use plugToRequest or setRawCookie.
link to readme
If this is what you need, great.
If not, please comment so I could elaborate more.
For anyone where none of these solutions are working, make sure that your request origin equals your request target, see this github issue.
I short, if you visit your website on 127.0.0.1:8000, then make sure that the requests you send are targeting your server on 127.0.0.1:8001 and not localhost:8001, although it might be the same target theoretically.
This worked for me:
First, I had to make a new instance of axios with a custom config
Then, I used that axios instance to make a post request
See code below:
const ax = axios.create({
baseURL: 'yourbaseUrl',
withCredentials: true,
});
const loginUser = () => { const body ={username:state.values.email, password:state.values.password};
ax.post('/login',body).then(function(response){
return response}).then().catch(error => console.log(error));}
source:
https://www.npmjs.com/package/axios#creating-an-instance
This won't apply to everyone, but I was using a React frontend with Vite and it was serving the localhost as 127.0.0.1:5173, which is what I put as the CORS allowable domain. As soon as I both to localhost everything worked as expected!
// use this while creating axios instance
const API = axios.create({
baseURL: "http://localhost:4000", // API URL
withCredentials: true,
});
// USE THIS MIDDLEWARE in app.js of backend
first, install cors npm i cors
var cors = require("cors"); // This should be at the end of all middlewares
const corsOptions = {
origin: "http://localhost:3000",
credentials: true, //access-control-allow-credentials:true
optionSuccessStatus: 200,
};
app.use(cors(corsOptions));
In my case, the problem was with the cookie, not with Axios; although I was receiving and sending the cookie from / to the same domain / subdomain / host, I was expecting it to work with different resources in different paths - but my coookie was acting like I had set it to a single Path, even though I omitted that attribute. Explicitly setting Path=/; in the cookie solved the issue.
Set the proxy in package.json(Frontend) and restart the server again (problem solved)
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 use wavesurfer, I get the following error:
XMLHttpRequest cannot load https://audiotemp.domain.net/RE65bbf6f0a2760184ab08b3fbf9f1d249.mp3.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://my.domain.net:3000' is therefore not allowed access. The response had HTTP status code 403.
The call is loaded, but the wave wasn't drawn, I check the network of requests and I found two requests for this call as the following:
403 Forbidden.
304 Not Modified.
The code of loading the call as the following:
scope.wavesurfer.load(scope.url);
For the second image I find there's cookies send with the request as the following:
Cookie:__zlcmid=TAePb8mwejYLug; calltrk_referrer=https%3A//app.gotomeeting.com/%3FmeetingId%3D306279333; calltrk_landing=https%3A//www.dentalmarketing.net/capture/; calltrk_session_id_150722382=c16eaa33-386f-4ab3-ba8d-b3d0cff070ef; __utma=52313532.1896763581.1423186152.1427741816.1431536946.4; __utmz=52313532.1431536946.4.3.utmcsr=bigleap.com|utmccn=(referral)|utmcmd=referral|utmcct=/utahs-best-brightest/; _ga=GA1.2.1896763581.1423186152; CloudFront-Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9hdWRpb3RlbXAuZGVudGFsbWFya2V0aW5nLm5ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDMzMDE2ODQ5fX19XX0_; CloudFront-Signature=btJ4dYPe3Cv87mQZzb6dkYVOLRcKQbscJ3h-ZJgSWGikNi1nXLuYXCGIwsHJWbhdTRiP8Gjru0mIQyOJdCioOa4tP3sAOSGXl9Cy1T2bM1sahgWZZ3GSk6GMyi21TVy3YsxDEdTUoMipeE0b5CduzcpcquB3hjYtfOUwI6CIrsTXkhajrGAk1rg~6tItPqMtxgmwrRM1oM8th0UgxgPWwVD2pok1ecS5ylwOiXbnSETpQzgXqS0C37bT94KpvafCjaclqgQPNcXrZRqbK~HLh28Gd4IZ3pDzIr3GNe3lkDUVIBYbStDsGZtawnS53ASmGXl3rP~DrPKYlahYX~ajKg__; CloudFront-Key-Pair-Id=APKAJL5DFWOODOOKTH2A
I put this cookies using Node.js Code as the following:
res.cookie('CloudFront-Policy',encodedCustomPolicy,{domain :cookieDomainName , path:'/', httpOnly:true,secure:true});
res.cookie('CloudFront-Signature',customPolicySignature,{domain :cookieDomainName , path:'/', httpOnly:true,secure:true});
res.cookie('CloudFront-Key-Pair-Id',cloudFrontKeyPairId,{domain :cookieDomainName , path:'/', httpOnly:true,secure:true}
So, I need to put three cookies on the first request, to get the call and draw the wave of it.
How can I send cookies with first request ?
How can I put header when I call load function of wavesurfer ?
I faced a similar problem trying to get the wavesurfer waveform to render via a CloudFront CDN link. I was receiving 403 Forbidden errors and the message:
Access to fetch at 'https://cdn.example.com/path/to/audio/file' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
Assuming you are generating a CloudFront policy and setting your cookies server-side, you need to both enable CORS and ensure that the CORS request that wavesurfer sends to retrieve your file uses the appropriate credentials (i.e. your CloudFront cookies).
Add the following to your node server file to enable sending CORS requests with cookies:
app.use(cors({ origin: "example.com", credentials: true }));
On the client, the big thing i missed was configuring the xhr object correctly on wavesurfer.create()
this.wavesurfer = WaveSurfer.create({
container: this.waveForm.current,
waveColor: "#D8D8D8",
progressColor: "#ED2784",
barRadius: 3,
cursorColor: "transparent",
responsive: true,
xhr: {
cache: "default",
mode: "cors",
method: "GET",
credentials: "include",
headers: [
{ key: "cache-control", value: "no-cache" },
{ key: "pragma", value: "no-cache" }
]
}
});
The mode: "GET" attribute indicates that that we are sending a cross-origin request that includes Access-Control headers. The credentials: "include" attribute tells wavesurfer to include the CloudFront cookies in the request.
You need to set CORS headers for static server. You can use cors lib.
var express = require('express');
var proxy = require('express-http-proxy');
var cors = require('cors');
var app = express();
// Enable CORS
app.use(cors({
exposedHeaders: ['Content-Length',
'Content-Type']
}));
// Serve static
app.use('/', express.static('public'));
// Proxy to media server
app.use('/media', proxy('http://%MEDIA_SERVER_ADDRESS%', {
forwardPath: function(req, res) {
return '/media';
}
}));
// Start server
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Server listening at http://%s:%s', host, port);
});