I have tried everything regarding the issue I am having with CORS with Web Api 2 and Angular.
I have downloaded the nuget package for CORS for the Web API.
I have enabled CORS in my controllers.
I added the following to my api web.config:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
</customHeaders>
</httpProtocol>
I added the following method to my controller:
public HttpResponseMessage Options()
{
return new HttpResponseMessage { StatusCode = HttpStatusCode.OK };
}
And I have put the EnableCorsAttribute at the top of the controller.
After this, when I make my POST, I get the following request from within fiddler:
OPTIONS http://api.carb-stage.derivesystems.com/api/Recaptcha/Post HTTP/1.1
Host: api.carb-stage.derivesystems.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://carb-stage.derivesystems.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://carb-stage.derivesystems.com/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
And this is the response I get:
HTTP/1.1 503 Service Unavailable
Content-Type: text/html; charset=us-ascii
Server: Microsoft-HTTPAPI/2.0
Date: Tue, 29 Sep 2015 20:10:49 GMT
Connection: close
Content-Length: 326
Related
I'm trying to call an API from an angularjs application
var url = "...";
var myObject = {...};
var config = {
headers : {
'Content-Type': 'application/json;charset=utf-8;'
}
};
$http.post(url, myObject, config).then(function(result){...});
Because it's a cross-origin request, it does the preflight, so it calls the OPTIONS method.
This is the request header:
Host: ...
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:68.0) Gecko/20100101 Firefox/68.0
Accept: */*
Accept-Language: pt-BR
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: http://localhost:9000/....
Origin: http://localhost:9000
DNT: 1
Connection: keep-alive
It returns as 200 OK, with the response header:
{
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Cache-Control: no-store, no-cache, must-revalidate
Content-Length: 0
Content-Type: text/html; charset=utf-8
Date: Fri, 01 Nov 2019 14:31:29 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Server: Microsoft-IIS/10.0
Vary: X-Requested-With
X-Frame-Options: GOFORIT
X-Powered-By: Nette Framework, ASP.NET
}
But it doesn't do the POST call afterwards. I tried calling the POST method directly through POSTMAN and it returned just fine. Is there something I'm missing?
EDIT: Heres the console error:
Possibly unhandled rejection:
{
"data":null,
"status":-1,
"config":{
"method":"POST",
"transformRequest":[null],
"transformResponse":[null],
"jsonpCallbackParam":"callback",
"headers":{
"Content-Type":"application/json;charset=utf-8;",
"Accept":"application/json, text/plain, */*"
},
"url":"...",
"data":{...},
"cached":false
},
"statusText":"",
"xhrStatus":"error"
}
The OPTIONS request has these headers set:
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
so it is asking whether it can do a POST request including the "content-type" header.
The server responds with:
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *
but it missing "Access-Control-Allow-Headers" response header:
Access-Control-Allow-Headers: content-type
Add this to the OPTIONS response and you should be good.
Possible, the error message in the console is
Reason: missing token ‘content-type’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel*
which is self-explanatory.
add the additional header to your web.config like so...
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
</customHeaders>
</httpProtocol>
I have my angularjs app on example.com and my laravel app on api.example.com
I modified my htaccess file so I can do cross domain ajax requests,
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET,POST,PUT,DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
</IfModule>
and set the domain value in config/session.php to .example.com
But when I make an api call the middleware response with a 401:
public function handle($request, Closure $next)
{
if ($this->auth->guest()) {
return response()->json([
'error' => 401,
'message' =>'Unauthorized.'],
401
);
}
return $next($request);
}
When I login via example.com/user/login?username=foo&password=bar I can pass the middleware without any problems.
Here is my api call
Request:
GET /modul HTTP/1.1
Host: api.reko.to
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://reko.to
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36
Referer: http://reko.to/modul/all
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,pt;q=0.2
Response
HTTP/1.1 401 Unauthorized
Date: Tue, 17 Nov 2015 11:22:11 GMT
Server: Apache/2.4.12 (Win32) OpenSSL/1.0.1l PHP/5.6.8
X-Powered-By: PHP/5.6.8
Cache-Control: no-cache
Set-Cookie: laravel_session=eyJpdiI6ImpWN0E5dEF0cndnXC9YUG52VU1XazlnPT0iLCJ2YWx1ZSI6IkNzY0JlbnlDbkRZNkQ2enpOdUtGaW92T0RIRmhtcHlcL0JyaERHU0V0YnN1bURHVzE4V1ZLam50MTNsaTh3Tm0xVWFZejdnVitYVHlTZ2R5WEw4eTY0QT09IiwibWFjIjoiZWI1ZTM2YjM1YjUxMTgyZmMxZTc5MzQzZWUzYzI0YWY1OGQwNmI5YzI1ZTFhNTZmNzM1MzA2MTM2NGNmNzk4ZiJ9; expires=Tue, 17-Nov-2015 13:22:12 GMT; Max-Age=7200; path=/; domain=.reko.to; httponly
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With
Content-Length: 39
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json
Here is my Login:
$http.post(apiUrl + 'user/login', $scope.user).success(function(result) {
$http.get(apiUrl + 'modul').success(function(result) {
console.log(result);
});
});
I have Web Api service hosted on IIS (localhost:81) and my angularjs app running on IIS Express (localhost:8080) is trying to communicate with it.
The angularjs service function is as below
function Register(username, password) {
var data = { "username": username, "password": password };
var promise = $http.post('http://localhost:81/api/Account', JSON.stringify(data));
return promise;
}
My Web Api service method looks like
public class AccountController : ApiController
{
[HttpPost]
public bool Post(User user)
{
Core.DataContracts.AuthenticationResponse authResponse = Account.CreateUser(Mapper.Map<Core.DataContracts.User>(user));
return (authResponse.Code == Core.DataContracts.ResponseCode.Created);
}
}
I read on various forum that it could be to do with CORS but I have got Access-Control-Allow-Origin in my web.config
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
Also, I am able to make a GET request but having this issue with the POST request.
Details from Fiddler are:
OPTIONS http://localhost:81/api/Account HTTP/1.1
Host: localhost:81
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.101 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Referer: http://localhost:8080/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
I tried making the request directly from Fiddler which results in a success
POST http://localhost:81/api/Account HTTP/1.1
User-Agent: Fiddler
Host: localhost:81
Content-Length: 40
Content-Type: application/json
{"username":"abc","password":"asasasas"}
Any help would be appreciated.
I managed to fix it by adding following to WebApiConfig.Register method
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
And removed CORS configuration from Web.config and Startup.cs
I have an issue processing responses from a server to a PUT request (same happens with POST). Starts with the following CORS pre-flight request.
Request:
OPTIONS /open/Patient/1 HTTP/1.1
Host: remoteserver.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: PUT
Origin: http://myclient
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
DNT: 1
Referer: http://myclient/patient/2JT
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Response:
HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 0
Date: Sat, 13 Sep 2014 16:58:28 GMT
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Location, Location
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: accept, content-type
Access-Control-Request-Method: GET, POST, PUT, DELETE
Server: Name of remote server
Then the actual request:
PUT /open/Patient/1 HTTP/1.1
Host: remoteserver.com
Connection: keep-alive
Content-Length: 775
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json+fhir, application/json, text/plain, */*
Origin: http://myclient
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Content-Type: application/json+fhir
DNT: 1
Referer: http://myclient/patient/2JT
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
The response is not processed by AngularJS, instead it reports the following error:
net::ERR_METHOD_NOT_SUPPORTED
The body of the response is empty, and the status is "0". Thing is, if I set a break point in the Chrome debugger, after stepping through the code, I DO get a successful response. Here's what I get in the response:
HTTP/1.1 200 OK
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/json+fhir; charset=UTF-8
Content-Length: 154
Date: Sat, 13 Sep 2014 17:13:35 GMT
Pragma: no-cache
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Location, Location
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Content-Location: http://remoteserver/open/Patient/1/_history/6
Server: Health Intersections FHIR Server
Here's the body of my code that sends the request using $http:
function updateResource(resourceUrl, resource) {
var deferred = $q.defer();
$http.put(resourceUrl, resource)
.success(function (data, status, headers, config) {
var results = {};
results.data = data;
results.headers = headers();
results.status = status;
results.config = config;
deferred.resolve(results);
})
.error(function (data, status) {
var error = { "status": status, "outcome": data };
deferred.reject(error);
});
return deferred.promise;
}
I've resolved this issue working with the developer of the server. Turns out there was an issue with the way the server handled connections. Resolved.
I'm trying to configure a simple service with Angular.js and Couchdb
var App = angular.module('myapp', ['ngResource'], function(){});
App.factory('products', ['$resource', function($resource) {
var Products = $resource(
'http://localhost\\:5984/products/_all_docs',
{},
{ all: { method: 'GET'} }
);
return {
all: function() {
return Products.all();
}
};
}]);
When I call products.all() from my controller always I get
Request headers
OPTIONS /productos/_all_docs HTTP/1.1
Host: localhost:5984
Connection: keep-alive
Access-Control-Request-Method: GET
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:8000
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.56 Safari/537.17
Access-Control-Request-Headers: accept, origin, x-requested-with
Accept: */*
DNT: 1
Referer: http://localhost:8000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: es-419,es;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Response headers
HTTP/1.1 405 Method Not Allowed
Server: CouchDB/1.2.1 (Erlang OTP/R14B04)
Date: Tue, 29 Jan 2013 22:15:31 GMT
Content-Type: text/plain; charset=utf-8
Content-Length: 69
Cache-Control: must-revalidate
Allow: GET,HEAD,POST
Request URL:http://localhost:5984/productos/_all_docs
Request Method:OPTIONS
Status Code:405 Method Not Allowed
I can not imagine why it sends an OPTIONS method when I haven't declared that!
The OPTIONS method comes from doing a cross origin request. See Why am I getting an OPTIONS request instead of a GET request?. Even though both the host and the request is to localhost, the ports are different (5984, 8000). See Same origin host, different ports in JS.