I have a react app running on http://localhost:5000/. Also I have another web app running on http://127.0.0.1:1880 and I want to open this website in iframe from react app. I set Content-Security-Policy: frame-ancestors http://localhost:5000/ but I'm still getting cors error and unable to see the content in iframe.
Node js code where I set the policies:
app.use(cors())
app.use(helmet({
contentSecurityPolicy: {
// "child-src": "http://localhost:5000",
directives:{
frameAncestors: "http://localhost:5000/",
}
}
}));
app.use(helmet.crossOriginEmbedderPolicy({ policy: "credentialless" }));
app.use(helmet.crossOriginOpenerPolicy({ policy: "unsafe-none" }));
app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));
Is there any way to fix this issue?
Related
I created a backend in node.js and a frontend in react.js. In the node app, I stored images in public/img folder but I can't access it in my react app
Node URL: http://127.0.0.1:8080
React URL: http://127.0.0.1:3000
The Cross-Origin-Resource-Policy header s set to same-origin. I wanna set it to cross-origin.
This is my cors code
app.use(
cors({
origin: process.env.FRONTEND_URL,
credentials: true
})
);
app.options("*", cors());
So how should I do it?
I set up my socket.io server on heroku but I have problem with getting data from it to my app. I get cors error:
My app is hosted on gh-pages. Here is how my socket.io setup looks like:
const io = require("socket.io")(port, {
cors: {
origin: "https://name.github.io/",
methods: ["GET"],
},
});
What should I put in origin, should it be gh-pages link or heroku app link? How can I fix that?
This is how my request looks like:
I tried putting https://name.github.io/ or https://name.herokuapp.com/, to origin property but none of this worked
For anyone having the same problem - I just removed / after url in origin and it worked :)
You should pass { cors: true, origin: <your-client-url> } as config option.
I am working on a react/express project. I have generated my npm build folder, but when I try to run it in my html browser, the favicon changes, besides that, nothing else displays.
app.use(globalErrorHandler);
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "..", "public/build")));
app.get("*", (req, res) =>
res.sendFile(path.resolve(__dirname, "..", "public", "build", "index.html"))
);
}
Is there something i'm missing?
I am getting this error on the console
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-81wjRQUIesSdM31ZewxoTpdk1zPOVbB5yDbEGkTCGjE='), or a nonce ('nonce-...') is required to enable inline execution.
Looks like you use Helmet 4 middleware, it publishes a default Content Security Policy.
Switch it off for a while or tune CSP rules to allow inline scripts (<script>... </script> construct).
New to all of this so this might be the wrong setup. I have set up one project which uses node to connect to a postgreSQL. This works and I can start this from VS Code using:
node index.js
and the response is:
App running on port 3000.
Another project is a client and has been created Vue. This is started using
npm run serve
The response is:
App running at:
- Local: http://localhost:8080/
The Vue client gets data from a source using the code below and then displays it. In this example it uses some dummy data and works fine.
created: function () {
axios
.get('https://jsonplaceholder.typicode.com/users/')
.then(res => {
this.users = res.data;
})
}
However if I change the source above to communicate with the local postgreSQL database server:
.get('http://localhost:3000/users/')
I quite rightly get the security issue in the browser console when trying to connect:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://localhost:3000/users/. (Reason: CORS
header 'Access-Control-Allow-Origin' missing)
So how do I intergrate the node.js part and the vue client part?
UPDATE
The answer to the question is below but I changed very slightly. The following was added to the index.js file (the node postgreSQL part). It is importing cors and saying allow conneciton from localhost:8080. Works perfectly:
import cors from 'cors';
const corsOptions = {
origin: 'http://localhost:8080'
};
You have to install lib cors. For that in your project folder just run the command:
npm i --save cors
After that lib is installed you should import and configure in your server application. To enable your front-end communicate with server side application.
const express = require('express');
const logger = require('morgan');
const cors = require('cors'); //<--install this lib
const app = express();
cors({ credentials: true, origin: true });//enable some headers for handling authentication tokens
app.use(cors());//use in your server
app.use(express.json());
if (process.env.NODE_ENV !== 'test') { app.use(logger('dev')); }
app.use(require('./server/index'));
module.exports = app;
As stated by the documentation, when you use the function cors() its equivallent to:
{
"origin": "*",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 204
}
This question already has answers here:
Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?
(36 answers)
Closed 3 years ago.
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.
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