I have a webservice in the same domain of my site. I have an ajax call to consult that webservice and works fine from IE but from Chrome and Firefox, I cannot make it work.
My ajax call is:
$.ajax({
type: 'POST',
async: false
data: xml,
url: url,
dataType: "xml",
success: function (data, textStatus, XmlHttpRequest) {
//On sucess action
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//On error action
},
headers: {
"Content-Type": "text/xml; charset=utf-8",
"SOAPAction": soapAction,
"Content-Length": xml.length + 1
}
});
But from chrome and firefox I receive:
XMLHttpRequest cannot load https://mydomain:83/<webservice>/<webservice>.asmx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://mydomain' is therefore not allowed access. The response had HTTP status code 500.
I add to the webconfig:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="https://mydomain"/>
<add name="Access-Control-Allow-Origin" value="http://mydomain"/>
<add name="Access-Control-Allow-Credentials" value="true"/>
</customHeaders>
</httpProtocol>
But no luck. Any idea what am I missing?
I gave up to soon. In my particular case, this do the trick for Chrome and Firefox
<add name="Access-Control-Allow-Origin" value="https://mydomain" />
<add name="Access-Control-Allow-Headers" value="Content-Type, SOAPAction" />
<add name="Access-Control-Allow-Methods" value="GET, POST" />
Related
Cors issue specifically in Internet Explorer only when
calling API from ajax call.
1)Request header content-type was not present in the Access-Control-Allow-
Headers list
2)XMLHttpRequest: Network Error 0x80070005, Access is denied.
I tried by followings
xhrFields: {
withCredentials: true
}
also by setting
...
crossDomain: true
...
headers: {
'Access-Control-Allow-Origin': '*'
},
Ajax call
var url = "https://dev-connectivity.dummylink";
var data = JSON.stringify({
"lang": "en",
"ClientId": "asdfasf3452345c42352345c",
"CountryCode": "34"
});
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
headers: {
'Access-Control-Allow-Origin': '*' },
data: data,
success: function (data) {
alert("tets");
},
error: function (error) {
alert("error");
}
});
//My api Webconfig code
<httpProtocol>
<customHeaders>
<remove name="Access-Control-Allow-Origin" />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="*" />
</customHeaders>
</httpProtocol>
// also Enabling Cors in startup
services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
builder.AllowAnyMethod()
.AllowAnyHeader();
}));
app.UseCors("CorsPolicy");
IE doesn't accept Content-Type header if you have provided * in you web.config file so to fix this issue, you need to manually add Content-Type header in Access-Control-Allow-Headers list inside your web.config file.
<customHeaders>
<remove name="Access-Control-Allow-Origin" />
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Any-Other-Header" />
</customHeaders>
Apologies for repeat but i've tried every suggestion to every question even vaguely similar to this to no end.
ajax post:
var contactForm = $('#contactForm');
contactForm.on('submit', (event) => {
event.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
}
})
console.log(contactForm.serializeArray())
$.ajax({
dataType: "json",
method : 'POST',
url : 'contact-us/post',
data : contactForm.serializeArray(),
success: (res) => {
console.log(res)
}
})
})
Route handling post:
Route::post('contact-us/post', 'EnquiryPostController#store');
PostController store method:
public function store(Request $request)
{
return response()->json(['success'=>$request->all()]);
}
Console output
response header from network tab
request header from network tab
from data from network tab
UPDATE:
Just to clarify:
I am passing the CSRF token.
The form inputs have name attributes.
The PostController is receiving the POST request but simply does not contain any form data.
This issue happens with AJAX POST and regular old form POST
Turns out this was not a Laravel issue but a Windows Server/web.config issue. I'd setup my site using the XML found here. After much trial and error the issue was solved using this XML:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<ModSecurity enabled="true" configFile="c:\inetpub\wwwroot\modsecurity.conf" />
<httpErrors errorMode="Detailed" />
<modules runAllManagedModulesForAllRequests="true" />
<defaultDocument>
<files>
<clear />
<add value="index.php" />
</files>
</defaultDocument>
<rewrite>
<rules>
<rule name="CanonicalHostNameRule1">
<match url="(.*)" />
<conditions>
<add input="{HTTP_HOST}" pattern="^dev\.financialservicesexpo\.co\.uk$" negate="true" />
</conditions>
<action type="Redirect" url="http://dev.financialservicesexpo.co.uk/{R:1}" />
</rule>
<rule name="default" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.php" />
</rule>
</rules>
</rewrite>
<staticContent>
<clientCache cacheControlMaxAge="8.00:00:00" cacheControlMode="UseMaxAge"/>
</staticContent>
</system.webServer>
</configuration>
I wish I could explain why this fixed the issue but I have very little understanding of server configuration. If anyone would like to comment with insight I at least would find it interesting.
IF THIS DID NOT HELP PLEASE READ BELOW
Getting to the bottom of this issue involved trying a lot of different solutions found across even more questions posted to StackOverflow, etc. and was ultimately solved in two minutes after chatting to a colleague and working though the issue out loud. A frustrating lesson I keep needing to learn... So, in the hope this might help others the following is a list of the aforementioned solutions you should check.
Check your form inputs have name attributes.
Clear your browser cache.
Clear Laravel cache data.
Restart website
When using AJAX try both serialize() and serializeArray()
When using AJAX try submitting with different DataTypes and ContentTypes. The default should be fine but worth a shout if your doing something different.
CSRF token: Add it via either a hidden input field or set in the request header. Only one should be needed.
Make sure the /storage and /bootstrap folders have read/write privileges enabled.
If anyone has any suggestions or corrections to what I have written here please do speak up. I am no means a expert.
Try in your ajax request using type instead of method like
$.ajax({
dataType: "json",
type : 'POST',
url : 'contact-us/post',
data : contactForm.serializeArray(),
success: (res) => {
console.log(res)
}
})
You can use the below solution to send data:
data : contactForm.serialize()
I am trying to make an HTTP PUT with an integer parameter to a MVC WebApi.
I tried to follow the angular 2 guidelines for HTTP PUT: https://angular.io/docs/ts/latest/guide/server-communication.html
My WebApi:
public IHttpActionResult Put([FromBody]int id)
{
return Ok();
}
My Http PUT in my service in my ionic 2 app:
makePut(){
let body = JSON.stringify({id:155320});
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return new Promise(resolve => {
this.http.put('API_URL', body, options)
.subscribe(
response => {
console.log(response.text());
},
error => {
//Failed to Login.
alert(error.text());
console.log(error.text());
});
});
}
And finally the call to my service from my home page:
this.service.makePut().then(data => {console.log(data);});
When I run this I get a 405 method not allowed. Is there anything I am missing?
UPDATE here is part of the web.config in my web api:
<system.webServer>
<security>
</security>
<validation validateIntegratedModeConfiguration="false" />
<modules runAllManagedModulesForAllRequests="true">
<remove name="WebDAVModule" />
</modules>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
<handlers>
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
It might be Web Api error and you can resolve that by adding this code to your web.config file
<handlers accessPolicy="Read, Script">
<remove name="WebDAV" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit"
path="*."
verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS"
modules="IsapiModule"
scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll"
preCondition="classicMode,runtimeVersionv4.0,bitness64"
responseBufferLimit="0" />
this article can give you more information about 405 error.
I was able to fix the problem, which turned out to be a CORS issue. You can view how to disable same origin policy in Chrome here: How to resolve CORS issue and JSONP issue in Ionic2
Once I disabled it in chrome, the HTTP PUT succeed.
Here is my final code:
makePut(){
let body = 155320; // this is different
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return new Promise(resolve => {
this.http.put('API_URL', body, options)
.subscribe(
response => {
console.log(response.text());
},
error => {
//Failed to Login.
alert(error.text());
console.log(error.text());
});
});
}
I've seen many posts about implementing cordova whitelist plugin but after a full week of testing i still haven't spotted what's my mistake.
This ajax call throws these alerts:
xhr {"readystate":0,"status":0,"statustext":"error"}.
status "error"
error ""
$.ajax({
url: 'http://www.example.com/my_file.php',
data: {type: 'test', code: '11'},
method: "GET",
dataType: "json",
timeout: 5000,
success: function (data) {
alert('done '+JSON.stringify(data));
},
error: function (xhr, status, error) {
alert('xhr '+JSON.stringify(xhr));
alert('status'+JSON.stringify(status));
alert('error '+JSON.stringify(error));
}
});
I updated my phonegap build app with the new cordova whitelist implementation adding this to the meta:
<meta http-equiv="Content-Security-Policy" content="default-src data: gap: https://ssl.gstatic.com 'unsafe-eval' *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.example.com; connect-src 'self' http://www.example.com">
this to the config.xml:
<gap:plugin name="cordova-plugin-whitelist" source="npm"/>
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
and this in the js before ajax calls:
$.support.cors=true;
I'm using all the wildcards at the moment for the testing, i'll change later. This is the server php file i'm calling:
<?php
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
$data = json_encode(array($_GET));
echo $data;
?>
Phonegap build version cli-5.2.0
Android 4.1.1
any help will be appreciated
Try this in your config.xml
<access origin="*"/>
<access origin="tel:*" launch-external="yes"/>
<allow-navigation href="*"/>
<allow-navigation href="http://*/*"/>
<allow-navigation href="https://*/*"/>
<allow-navigation href="data:*"/>
<allow-intent href="*"/>
<access origin="*"/>
I am trying to implement a Delete method on a Web API controller. However, I always get a 404 - Not Found. At this point, I have GET, POST and PUT methods that are working just fine. I've been reading a handful of the other SO posts about the same issue - just none of them are working.
The Controller Action
public virtual HttpResponseMessage Delete(string customerId)
{
adapter.RemoveCustomer(customerId);
return Request.CreateResponse(HttpStatusCode.OK, "The customer was deleted.");
}
The AJAX Request
function remove(customer, success, error) {
var url = '/api/Customer';
var data = JSON.stringify({ 'customerId': customer.CustomerId });
$.ajax({
url: url,
type: 'DELETE',
data: data,
contentType: 'application/json'
})
.done(function (data, textStatus, handler) {
success(data);
})
.fail(function (handler, textStatus, errorThrown) {
error(errorThrown);
});
};
The Web.Config
This is my web.config file. Except for the modules section, everything is the same as when I created the project:
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<!--<modules runAllManagedModulesForAllRequests="true"></modules>-->
<modules>
<remove name="UrlRoutingModule-4.0" />
<add name="UrlRoutingModule-4.0" type="System.Web.Routing.UrlRoutingModule" preCondition="" />
</modules>
<handlers>
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
I am using IIS Express, but the issue still occurs if I switch back to Visual Studio Development Server.
The Raw HTTP
Here is the raw HTTP request captured by Fiddler:
DELETE http://localhost:63654/TestMvcApplication/api/Customer HTTP/1.1
Host: localhost:63654
Connection: keep-alive
Content-Length: 49
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://localhost:63654
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
Content-Type: application/json
Referer: http://localhost:63654/TestMvcApplication/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
{"customerId":"e107e2dc20834545ae209849bff195f0"}
And here is the response:
HTTP/1.1 404 Not Found
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcdHBhcmtzXERvY3VtZW50c1xHaXRIdWJcVGVzdE12Y0FwcGxpY2F0aW9uXFRlc3RNdmNBcHBsaWNhdGlvblxhcGlcQ3VzdG9tZXI=?=
X-Powered-By: ASP.NET
Date: Tue, 02 Jul 2013 13:11:52 GMT
Content-Length: 220
{"Message":"No HTTP resource was found that matches the request URI 'http://localhost:63654/TestMvcApplication/api/Customer'.","MessageDetail":"No action was found on the controller 'Customer' that matches the request."}
This is an open source project for teaching myself. I have checked in the latest in case anyone wants to see the complete source.
public virtual HttpResponseMessage Delete(string customerId)
Parameter is a simple type and is bound from URI and not from request body. Either pass the customer ID in query string like this - http://localhost:63654/TestMvcApplication/api/Customer?customerId=123 or change the signature to public virtual HttpResponseMessage Delete(string id) and use a URI http://localhost:63654/TestMvcApplication/api/Customer/123.