I'm making a page in angularJs, when I send request to my API, it is generate error:
My code is:
<!DOCTYPE html>
<html ng-app="AppIndex">
<head>
<meta charset="utf-8">
<title>Hola mundo</title>
<script src=".7.9/angular.min.js"></script>
<script src="ControllerIndex.js"></script>
</head>
<body ng-controller="ControllerIn">
{{"Hola Mundo" + nombre}}
<button ng-click="metodos()">Enviar</button>
<ul>
<li ng-repeat="response in posts">
<h2>holaaaaa</h2>
<p>{{response.title}}</p>
<p>{{response.body}}</p>
</li>
</ul>
</body>
</html>
and javaScript
angular.module("AppIndex",[])
.controller("ControllerIn", function($scope, $http){
$scope.nombre = "Juan";
$scope.newPost = {};
$scope.responses = [];
$scope.metodos = function(){
$http({
method: 'POST',
url: 'http://localhost:900/Servicios/forgotPassword',
Headers: {"Access-Control-Allow-Origin": "http://127.0.0.1", "Access-Control-Allow-Methods": "POST", "Content-Type" : "application/json"},
data: {"user" : "admin1"}
}).then(function (response){
console.log(response);
$scope.posts = response;
},function (error){
console.log(error);
});
}
})
The error message is:
POST http://localhost:900/Servicios/forgotPassword 403 {data: "Invalid CORS request", status: 403, config: {…}, statusText: "", headers: ƒ, …
I'm using AngularJS 1.7.9
I'm making a page in angularJs, when I send request to my API, it is generate error:
My code is:
<!DOCTYPE html>
<html ng-app="AppIndex">
<head>
<meta charset="utf-8">
<title>Hola mundo</title>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="ControllerIndex.js"></script>
</head>
<body ng-controller="ControllerIn">
{{"Hola Mundo" + nombre}}
<button ng-click="metodos()">Enviar</button>
<ul>
<li ng-repeat="response in posts">
<h2>holaaaaa</h2>
<p>{{response.title}}</p>
<p>{{response.body}}</p>
</li>
</ul>
</body>
</html>
and javaScript
angular.module("AppIndex",[])
.controller("ControllerIn", function($scope, $http){
$scope.nombre = "Juan";
$scope.newPost = {};
$scope.responses = [];
$scope.metodos = function(){
$http({
method: 'POST',
url: 'http://localhost:900/Servicios/forgotPassword',
Headers: {"Access-Control-Allow-Origin": "http://127.0.0.1", "Access-Control-Allow-Methods": "POST", "Content-Type" : "application/json"},
data: {"user" : "admin1"}
}).then(function (response){
console.log(response);
$scope.posts = response;
},function (error){
console.log(error);
});
}
})
The error message is:
POST http://localhost:900/Servicios/forgotPassword 403 {data: "Invalid CORS request", status: 403, config: {…}, statusText: "", headers: ƒ, …
I'm using AngularJS 1.7.9
- 1 CORS is managed on the server – Jaromanda X Commented Jan 6, 2020 at 23:30
4 Answers
Reset to default 2Cors policy is managed from the server
You need to allow from your server specific (or all) url's that can access your server
The way to allow it is
In your Http Response add this header with your url specified or with an asterisk to allow all
Access-Control-Allow-Origin, "your url"
Access-Control-Allow-Origin, "*"
You can also choose to only allow certain request methods (or all types) as well by adding additional header:
Access-Control-Allow-Methods, "POST"
Access-Control-Allow-Methods, "*"
The browser first sends a preflight request checking if the origin and request type match, and only if it sees it allowed like above headers it will make the actual call.
PS cors issue is only when calling from a browser, not from server calls and not from development tools like postman
Access-Control-Allow-Origin is a response header; if I am not mistaken, this is client code. You will need to send the Access-Control-Allow-* headers from the server-side in response to the client request.
you need to enable CORS request from server end only. which backend you are using?
If you are using express.JS as backend then you need to pass your cors property as an middelware.
How to do this in express.JS
Method 1
create a file cors.js. Then copy this code and paste in your cors.js file
module.exports = function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header('Access-Control-Allow-Methods', 'DELETE, PUT, GET, POST'); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }After that you need require this cores.js file in your server.js file and pass it as an middleware for Example:
app.use(require('./cors'));
Method 2
you can simply install cors using npm i cors and require in your server file.
NOTE : This is what you do in express.js. But if you are using any other backend technology then similarly you can do something like that this is just an example using express.JS