I'm getting "Possible cross-origin (CORS) issue?" error for Spec2 when run this swagger-ui-express app:
const express = require('express');
var cors = require('cors');
const app = express();
const swaggerUi = require('swagger-ui-express');
var options = {
explorer: true,
swaggerOptions: {
urls: [
{
url: 'http://petstore.swagger.io/v2/swagger.json',
name: 'Spec1'
},
{
url: 'http://xxx.xxx.xxx.xxx:xxxxx/swagger.json',
name: 'Spec2'
}
]
}
}
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(null, options));
app.listen(8080, () => console.log(`Listening on port 8080!`))
Neither app.use(cors()) nor app.use(swaggerUi.cors()) helps. How can it be fixed?
I am not sure if this is exact problem you are facing, but the following solution has fixed my issue.
I was using a fetch on an endpoint and the error suggested that the received request has an origin (header) of value null.
I have set up a request interceptor to add an origin header on the request. Example
app.get("/docs", swaggerUi.setup(null, {
swaggerOptions: {
requestInterceptor: function(request){
request.headers.Origin = `http://localhost:3000`;
return request;
},
url: `http://localhost:3000/docs/api-doc`
}
}))
check the link which gives the way to overcome the issue. Also, you can install CORS plugin in chrome if you want and try it.
Related
Chrome authorization Headers
I believe I have cors configured correctly in my backend. The API is hosted on Heroku if that helps. Here is the server.js file:
const express = require("express");
const helmet = require("helmet");
const cors = require("cors");
const bodyParser = require("body-parser");
const productsRouter = require("./products/products-router");
const ordersRouter = require("./orders/orders-router");
const emailsRouter = require("./emails/emails-router");
const corsOptions = {
origin: "*",
credentials: true,
optionSuccessStatus: 200,
};
const server = express();
server.use(express.json());
server.use(helmet());
server.use(cors(corsOptions));
server.use("/api/products", productsRouter);
server.use("/api/orders", ordersRouter);
server.use("/api/emails", emailsRouter);
server.use((err, req, res, next) => {
res.status(err.status || 500).json({
message: err.message,
});I
});
module.exports = server;
I get a cors error when my front-end tries to make HTTP requests to the backend. It reads as follows:
Access to XMLHttpRequest at
'https://nanasoapsbackend.herokuapp.com/api/products/categories' from
origin 'http://localhost:3000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Yes, my back and and front end are on different domains. This just happened all of a sudden, it was working fine with no cors errors for the past few months, and suddenly it stopped working. Any help would be greatly appreciated.
The problem is: You can't have origin * (allow everything) with allow credentials. See: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
You have to set up a white list (list of domains that are allowed)
const whitelist = ['http://www.example.com', 'http://www.otherexample.com']
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.includes(origin)) {
callback(null, true)
} else {
callback(new Error('Not allowed'))
}
}
}
Then on your client side (frontend) make sure you use withCredientals flag on your http agent (axios, superagent, fetc, etc)
I want to debugging in the localhost:3000 port when develop a react app, my server api address is admin.example.com, I config like this in the project src/setupProxy.js file:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(createProxyMiddleware('/\/manage\/?$/',
{
target: 'https://admin.example.com/',
changeOrigin: true
}));
};
but when I start the app, still give me tips that the XHR was cross origin. what should I do to make it work? Am I missing something? this is the http-proxy-middleware version "http-proxy-middleware": "^2.0.1". the full request url is: https://admin.example.com/manage/dashboard/overview.
Please try this:
Here is the setupProxy.js file:
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/manage", { target: "https://admin.example.com/" }));
}
API request example:
app.post("manage/login", requireSignIn, Authentication.login);
I have the following code:
const { v4: uuidv4 } = require('uuid')
const functions = require('firebase-functions')
const nodemailer = require('nodemailer')
const cors = require('cors')({ origin: true })
const gmailEmail = functions.config().gmail.email
const gmailPassword = functions.config().gmail.password
const mailto = functions.config().gmail.mailto
const mailTransport = nodemailer.createTransport({
service: 'gmail',
auth: {
user: gmailEmail,
pass: gmailPassword
}
})
exports.sendMail = functions.https.onRequest((req, res) => {
cors(req, res, () => {
const items = req.body.items.forEach(item => (
`${item.quantity} x ${item.uuid} (${item.name})\n`
))
if (req.method === 'POST') {
const mailOptions = {
from: gmailEmail,
replyTo: gmailEmail,
to: mailto,
subject: `Order ${uuidv4()} from ${req.body.name} (${req.body.email})`,
text: `Order\n\n${items}`
}
mailTransport.sendMail(mailOptions)
res.status(200).send(JSON.stringify({ status: 'OK' }))
} else {
res.status(400).send(JSON.stringify({ status: 'method not allowed' }))
}
})
})
For some reason it worked once and then keeps giving me
Access to fetch at 'https://xxxxx.cloudfunctions.net/sendMail' from origin 'https://xxxx.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.
What am I missing? If possible I'd like to avoid using Express.
For you to configure CORS on your Cloud Functions with Firebase, you will need to configure and set some additional parameters - as mentioned in the official documentation here - for CORS to be authorized and execute via HTTP in your application.
The parameters in an example of settings that you will need to configure on your application is the following:
const express = require('express');
const cors = require('cors')({origin: true});
const app = express();
app.use(cors({ origin: true }));
I would recommend you to give it a try using the above setting for you to give the authorization in your backend.
Besides that, the below questions from the Community, there are some other solutions and use cases of similar issues to yours, that I believe should help you achieve the configuration and that I think you should check as well.
Enabling CORS in Cloud Functions for Firebase
Enable CORS while an XMLHttpRequest error occurs in flutter web
Let me know if the information helped you!
I use Helmet with Express to set quite some security HTTP headers from the server side. This is nicely done, when rendering client pages on top of the node.js app, using:
var app = express();
app.use(helmet());
..
res.render("pages/index", data);
All the resources on the index page will have the Helmet headers. Unfortunately, socket.io does its own header management. So, anything that comes after /socket.io/ will have insecure/its own headers. For example here:
<https_path>/socket.io/socket.io.js
<https_path>/socket.io/?EIO=3&transport=polling&t=Lj4CFnj&sid=ILskOFWbHUaU6grTAAAA
Hence, I want to set custom headers for all socket.io items manually.
This is how I require socket.io (excerpt only):
/src/app.js
var express = require("express");
var sio = require("socket.io");
var app = express();
var io = require("./../lib/io.js").initialize(app.listen(REST_PORT, () => {
logger.info("Application ready on port " + REST_PORT + " . Environment: " + NODE_ENV);
}));
/lib/io.js
exports = module.exports = {};
var sio = require("socket.io");
exports.initialize = function(server) {
var options = {
cookie: false,
extraHeaders: {
"X-Custom-Header-For-My-Project": "Custom stuff",
}
};
io = sio(server, options);
io.on("connection", function(socket) {
// logic
)};
The "extraHeaders" option doesn´t work, I guess it could only with socket.io-client. I did large amount of googling around, but not luck on this.
Also looked around how to use socket.request (apparently it helps with headers, according to: here), but I couldn´t figure that out either.
Could you guys help?
extraHeaders options will work as below, as you need to remove "transports: ['polling']," in case you are using, and use below pattern. This worked for me, and was able to send custom headers.
package used :- "socket.io-client": "^2.2.0",
this.socket = io(environment.host, {
path: `/api/backend/socket.io`,
origins: '*:*',
// transports: ['polling'],
transportOptions: {
polling: {
extraHeaders: {
'authorization': token,
'user-id' : userId
}
}
}
})
Ref:- https://socket.io/docs/client-api/#With-extraHeaders
I'm using Node with Express with the twit and express-cors modules for a Twitter API app.
I got everything working with jQuery and I'm now trying to get it working with vanilla JS.
I get the console message "XMLHttpRequest cannot load https://api.twitter.com/1.1/search/tweets.jsonq=%23cats&callback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access. The response had HTTP status code 404."
This happens both with and without the callback parameter.
So here is the relevant Node code:
var express = require('express'),
cors = require('express-cors'),
Twit = require('twit'),
path = require('path');
var T = new Twit({
consumer_key: ''
, consumer_secret: ''
, access_token: ''
, access_token_secret: ''
})
var app = express();
app.use(cors({
allowedOrigins: [
'twitter.com'
]
}))
app.get('/api/search/:hashtag', function(req, res){
T.get('search/tweets', { q: '#cats', count: 5 }, function(err, data, response) {
res.jsonp(data); // jsonp or json, neither seem to work
console.log(data)
});
});
app.param('hashtag', function(req, res, next, hashtag){
req.hashtag = hashtag;
next();
});
The AJAX call is as follows:
document.getElementById("submitButton").addEventListener("click", function(){ getCORS(url, success); });
function getCORS(url, success) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = success;
xhr.send();
return xhr;
}
getCORS('https://api.twitter.com/1.1/search/tweets.jsonq=%23cats', function(request){
response = request.currentTarget.response || request.target.responseText;
console.log(response);
});
It was working with the jQuery version without the express-cors module even. What am I missing here?
Looks like you're mounting the cors middleware twice. See if getting rid of the first app.use(cors()) fixes it. Then you can try using curl to test it out. curl -v -H "Origin: https://twitter.com" http://localhost:3000/ replacing the port 3000 with the port you're using.