I'm trying to make a request to a remote server running with Sails JS (NodeJS) using AngularJS in the frontend and I'm getting this origin 'null' error:
XMLHttpRequest cannot load http://remoteserver:1337/login/. The 'Access-Control-Allow-Origin' header contains the invalid value ''. Origin 'null' is therefore not allowed access.
My request looks somethign like:
$http.post('http://remoteserver:1337/login/', { email: userData.email, password: userData.password});
Any ideas?
You nead the server to enable CORS (cross origin resource sharing),
from Sails.js cors documentation (http://sailsjs.org/documentation/concepts/security/cors)
To allow cross-origin requests from any domain to any route in your app, simply enable allRoutes in config/cors.js:
allRoutes: true
and here is a brief explanation about what CORS is and why it is needed:
http://enable-cors.org/index.html
Related
I am trying to setup a Cloud Gateway between React App and NodeJS application
Below is error I am getting on ReactApp:
Access to XMLHttpRequest at 'http://localhost:8080/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am already tried below link, as much may be with newer version of Cloud Gateway it is not working.
Attempt #1:
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedOrigins=*
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedMethods=*
With this I was getting Header issue so I added:
spring.cloud.gateway.globalcors.cors-configurations.[/**].allowedHeaders=*
I am getting below error:
The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed.
Attempt #2:
I tried adding the following bean:
#Bean
Function<GatewayFilterSpec, UriSpec> brutalCorsFilters() {
return f -> f
.setResponseHeader("Access-Control-Allow-Origin", "*")
.setResponseHeader("Access-Control-Allow-Methods", "*")
.setResponseHeader("Access-Control-Expose-Headers", "*");
}
But still no luck
Repo: https://github.com/shah-smit/quizroulette-spring-cloud-api-gateway
Please check your configuration carefully, it should be your configuration that caused multiple values, refer to this
The 'Access-Control-Allow-Origin' header contains multiple values
Maybe you can debug your code and find out where 'Access-Control-Allow-Origin' becomes two values.
I am getting an error when I try to make request from my react SPA application to get id and access token from Azure AD. Below is the error from the browser console log:
Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenant id}/oauth2/token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am trying PKCE flow for my SPA and I am not using any JS library. I am making hte request with plain XMLHttpRequest.
Please suggest what I am missing.
You can use this error with install "Allow CORS: Access-Control-Allow-Origin" or same extention on your browser.
From my Angular client, i am invoking another application URL which will return a JSON object.
When i try in IE11 , it works fine but in Firefox and Chrome, i get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).
I tried to add the Access-Control-Allow-origin in the header, i started get CORS Request Failed.
How can i handle this scenario in my angular 1.5 application?
Access-Control-Allow-origin
First of all it has nothing to do with angular. You make an request to backend and your backend response to the request.
CORS Filter Missing Angular there is no CORS Filter Missing Angular in angular but in your api. You need to set CORS Filter in your api so your angular application can make a request and api can response to that.
This picture describe how cors filter works
I'm trying to make a request with Angular like this:
(function () {
'use strict';
angular.module('app')
.service('requestService',requestService);
function requestService($http) {
this.post = function(url, data) {
return $http({
'method': 'POST',
'url': url,
'data': $.param(
data
)
});
}
}
})();
I receive the error in my console:
XMLHttpRequest cannot load http://lsupport.dev/api/v1/login. 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.
My http://localhost:3000 is build with Gulp. I've already searched a lot on the web, but I cannot find a solution.
You need to enable CORS on the server (remote) to permit the code to execute requests with a different domain.
CORS-Wikipedia
You must need access of the server in which your making the request OR owner of the server need to enable it.
Please check the following post in more details.
Header set Access-Control-Allow-Origin in .htaccess doesn't work
Access-Control-Allow-Origin Multiple Origin Domains?
Homestead is Nginx server Please follow the steps. To solve it.
Handling CORS with Nginx
Access Control Origin nothing to do with AngularJS, It server end issue to respond to the specific request there is different configuration based on your server type like Apache, Nginx.
I couldn't call my service which gives an error
index.html:1 XMLHttpRequest cannot load http://localhost:14652/api/Employee. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1873' is therefore not allowed access.
What should i do?
Your browser won't let you make this request because the Access-Control-Allow-Origin (necessary for a cross-domain request) is missing in the header of whatever send your api, if you just want to make some tests you can disable it on your browser by launching it with the following flags:
google-chrome --disable-web-security --allow-file-access-from-files
But you should really read this : http://www.eriwen.com/javascript/how-to-cors/ and have cors working on your server