angular-soap icon indicating copy to clipboard operation
angular-soap copied to clipboard

CORS

Open blakemcbride opened this issue 9 years ago • 23 comments

He, I am attempting some cross-site SOAP services. The services work fine. I've been using them for years. The back-end is Java/Tomcat-8.0.9. I have spent many hours and I keep getting:

OPTIONS http://localhost:8084/Arahant/MainOps soapclient.js:190 SOAPClient._sendSoapRequestsoapclient.js:153 SOAPClient._onLoadWsdlsoapclient.js:142 xmlHttp.onreadystatechange
index.html:1 XMLHttpRequest cannot load http://localhost:8084/Arahant/MainOps. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 403.
soapclient.js:331 Uncaught TypeError: Cannot read property 'getElementsByTagName' of nullsoapclient.js:331 SOAPClient._getElementsByTagNamesoapclient.js:198 SOAPClient._onSendSoapRequestsoapclient.js:187 xmlHttp.onreadystatechange

Tomcat's web.xml has the following:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,Accept,Accept-Encoding,Accept-Language,Cache-Control,Connection,Host,Pragma,Origin,Referer,User-Agent,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Content-Length,Content-Type,Date,Server,Access-Control-Allow-Credentials</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

The JS code looks like this:

    $soap.post('http://localhost:8084/Arahant/MainOps', 'getLoginProperties').then(function(response) {
        var x = response;
        var y = x;
    });

I have no idea what else to do. If you could, I would sure appreciate it.

Thanks.

Blake McBride

blakemcbride avatar Mar 20 '15 04:03 blakemcbride

You're never actually setting the Access-Control-Allow-Origin header, just allowing it.

You're missing:

<init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
</init-param>

and you might also need:

<init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, POST, HEAD, OPTIONS</param-value>
</init-param>

andrewmcgivery avatar Mar 20 '15 04:03 andrewmcgivery

The reason I hadn't done what you suggested is because those are the default values when the filter is enabled. I changed my web.xml, it now has:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,Accept,Accept-Encoding,Accept-Language,Cache-Control,Connection,Host,Pragma,Origin,Referer,User-Agent,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Content-Length,Content-Type,Date,Server,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, POST, HEAD, OPTIONS</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

But I am still getting the same error. I even tried replacing my list of allowed headers and exposed headers to *. Still the same problem.

Thank you very much for helping! I really appreciate it. Can you think of anything else?

Thanks!

Blake

blakemcbride avatar Mar 20 '15 04:03 blakemcbride

I'm having exactly the same problem, making a call directly with XMLHttpRequest was not working at the beginning and then started to work when I follow the instructions in TomCat configuration, here: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

And my server is OK for CORS, actually this test is passed: http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fpreappcog.cognifit.com%2FCPCService&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

I made the required changes in the web.xml file and it worked, but when using "angular-soap" library I'm having the problem again:

OPTIONS https://preappcog.cognifit.com/CPCService 
index.html:1 XMLHttpRequest cannot load https://preappcog.cognifit.com/CPCService. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.
soapclient.js:331 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

I have added the two params you suggested to the params I have: cors.supportedMethods and cors.allowOrigin, my web.xml is looking this way:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Blake, did you find a solution? Andrew, any approach for a solution? Thanks!

ignaciohita avatar Apr 16 '15 10:04 ignaciohita

I have not yet found a solution. This is going to be my #1 priority this coming weekend. Please let me know if you find anything. I'll do the same.

Thanks.

Blake

On Thu, Apr 16, 2015 at 5:40 AM, ignaciohita [email protected] wrote:

I'm having exactly the same problem, making a call directly with XMLHttpRequest was not working at the beginning and then started to work when I follow the instructions in TomCat configuration, here: http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

I made the required changes in the web.xml file and it worked, but when using "angular-soap" library I'm having the problem again:

OPTIONS https://preappcog.cognifit.com/CPCService index.html:1 XMLHttpRequest cannot load https://preappcog.cognifit.com/CPCService. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.

soapclient.js:331 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

I have added the two params you suggested to the params I have: cors.supportedMethods and cors.allowOrigin, my web.xml is looking this way:

CorsFilter org.apache.catalina.filters.CorsFilter
<init-param>
    <param-name>cors.allowOrigin</param-name>
    <param-value>*</param-value>
</init-param>
<init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
</init-param>
<init-param>
    <param-name>cors.supportedMethods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
</init-param>
<init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
</init-param>
CorsFilter /*

Blake, did you find a solution? Andrew, any approach for a solution? Thanks!

— Reply to this email directly or view it on GitHub https://github.com/andrewmcgivery/angular-soap/issues/3#issuecomment-93704743 .

blakemcbride avatar Apr 16 '15 18:04 blakemcbride

Hi Blake,

I'm investigating too, this is what I have discovered, maybe can help you this weekend:

To be honest, I think the library is OK and this is a problem related to the server configuration. I think that due to the results in the CORS test page:

http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fpreappcog.cognifit.com%2FCPCService&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

At the beginning I couldn't make any calls, then I modified the web.xml file to include CORS filter and then I could make some calls but only using GET, if I use POST I'm having the same problem I have when using this library:

http://client.cors-api.appspot.com/client#?client_method=POST&client_credentials=false&server_url=https%3A%2F%2Fpreappcog.cognifit.com%2FCPCService&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

So I think this problem is related with some bad configuration of the server related to accept CORS calls by POST, I don't know why, because I have GET and POST in the configuration file:

<init-param>
    <param-name>cors.supportedMethods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>

So no idea, but I think this should be the problem.

Thanks!

ignaciohita avatar Apr 17 '15 05:04 ignaciohita

Thank you. This will be helpful.

On Fri, Apr 17, 2015 at 12:54 AM, ignaciohita [email protected] wrote:

Hi Blake,

I'm investigating too, this is what I have discovered, maybe can help you this weekend:

To be honest, I think the library is OK and this is a problem related to the server configuration. I think that due to the results in the CORS test page:

http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fpreappcog.cognifit.com%2FCPCService&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

At the beginning I couldn't make any calls, then I modified the web.xml file to include CORS filter and then I could make some calls but only using GET, if I use POST I'm having the same problem I have when using this library:

http://client.cors-api.appspot.com/client#?client_method=POST&client_credentials=false&server_url=https%3A%2F%2Fpreappcog.cognifit.com%2FCPCService&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

So I think this problem is related with some bad configuration of the server related to accept CORS calls by POST, I don't know why, because I have GET and POST in the configuration file:

cors.supportedMethods GET,POST,HEAD,OPTIONS,PUT cors.allowed.methods GET,POST,HEAD,OPTIONS,PUT

So no idea, but I think this should be the problem.

Thanks!

— Reply to this email directly or view it on GitHub https://github.com/andrewmcgivery/angular-soap/issues/3#issuecomment-93899272 .

blakemcbride avatar Apr 17 '15 13:04 blakemcbride

I have been doing all of that without any help.

Thanks.

Blake

On Thu, Mar 19, 2015 at 11:29 PM, andrewmcgivery [email protected] wrote:

You're never actually setting the Access-Control-Allow-Origin header, just allowing it.

You're missing:

cors.allowOrigin *

and you might also need:

cors.supportedMethods GET, POST, HEAD, OPTIONS

— Reply to this email directly or view it on GitHub https://github.com/andrewmcgivery/angular-soap/issues/3#issuecomment-83901500 .

blakemcbride avatar Apr 18 '15 17:04 blakemcbride

What do you mean?

ignaciohita avatar Apr 18 '15 20:04 ignaciohita

I got everything working without changing anything on the back-end. The front-end looks like this:

$http({ method: 'POST', url: 'http://mysite.com/MyService', data: '<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">' + ' <S:Body>' + ' <ns2:myMethod xmlns:ns2="http://operations.mysite.com">' + ' ' + ' <contextCompanyId/>' + ' ' + ' ' + ' ' + ' /ns2:myMethod' + ' /S:Body' + '/S:Envelope', headers: { "Content-Type": 'text/xml'} }) .success(function (data, status, header, config) { // xml string in data }) .error(function(data, status, headers, config) { ... });

Hope this helps.

Blake

blakemcbride avatar Apr 18 '15 21:04 blakemcbride

Well, that's OK but you are not using the library? I'd like to have it working using angular-soap, but thanks anyway.

ignaciohita avatar Apr 19 '15 07:04 ignaciohita

I've the same problem I've a soap service working and, I use this code to consume the service without any problem:

    callService : function()
    {
        var ret = {data:false};
        $.ajax({
            url: this.get('url'),
            type: "POST",
            data: this.get('message'),
            async: false,
            contentType: "application/soap+xml; charset=utf-8",
            dataType : "xml",
            success: function(data){
                 ret.data = data;
            },
            error: function(request, status, error){
                console.error(request);
                console.error(status);
                console.error(error);
                ret.data = false;
            },
        });
        return ret.data;
    },

But when I use the library I get(Firefox in Spanish):

Solicitud desde origen distinto bloqueada: la política de mismo origen impide leer el recurso remoto en http://cooldomain.com/ws/myservice?wsdl. Esto se puede arreglar moviendo el recurso al mismo dominio o activando CORS.

So the bug is fiexd?, because I would like to implement this library with angular. If the bug is fixed please let me know :) .

cristianchaparroa avatar May 03 '15 04:05 cristianchaparroa

Hi Cristian,

The bug is not fixed, but it seems the problem is not in the library, is in the server configuration. Did you try with test-cors? Try it and tell me if you get a good response or not, to let me investigate more.

http://test-cors.org

Thanks.

ignaciohita avatar May 04 '15 06:05 ignaciohita

Hi @ignaciohita the application in the server has the righ setup for the CORS, because I used it before, just with phonegap, now I'm trying to implement with ionic but not works.

cristianchaparroa avatar May 05 '15 01:05 cristianchaparroa

Did you test your server with http://test-cors.org ? Which response are you having using POST? Maybe your configuration is OK for phonegap because is using GET but SOAP is using POST.

ignaciohita avatar May 05 '15 07:05 ignaciohita

Hi @ignaciohita , I used post you can see it above in my example code, and the answer from test-cors is:

Fired XHR event: loadstart
Fired XHR event: readystatechange
Fired XHR event: readystatechange
Fired XHR event: progress
Fired XHR event: readystatechange
Fired XHR event: load

XHR status: 500
XHR status text: Internal Service Error
XHR exposed response headers:

Content-Type: text/xml; charset=utf-8

Fired XHR event: loadend

cristianchaparroa avatar May 05 '15 10:05 cristianchaparroa

So your server is not accepting POST petitions, it is working with GET? If your server is not working with POST petitions I think "angular-soap" is not going to work, is the same problem I'm having then.

ignaciohita avatar May 05 '15 10:05 ignaciohita

Mi server is working with POST. I've a question, why the next code is works is you say that my server not accepting POST?:

  $scope.callService = function(){
      $scope.message = 'http://cooldomain.com/web/app_dev.php/ws/loginOperador?wsdl';
      $scope.soapMessage =
        '<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><login xmlns="http://cooldomain.com"><pin>' +
         13594 + '</pin></login></soap:Body></soap:Envelope>';
      $http({
          url: $scope.myurl
          method: "POST",
          data: $scope.soapMessage
      }).success(function(data, status, headers, config) {
          console.log(data);
          $scope.data = data;
      }).error(function(data, status, headers, config) {
          $scope.status = status;
      });
    }

cristianchaparroa avatar May 07 '15 02:05 cristianchaparroa

In your previous comment you said you were having errors when calling to your server using test-cors:

XHR status: 500 XHR status text: Internal Service Error

I think fixing that will fix the issue with this library but I'm not sure, I'm still investigating.

ignaciohita avatar May 07 '15 08:05 ignaciohita

yes, probably because I never send the soap Message :) in test-cors

cristianchaparroa avatar May 07 '15 10:05 cristianchaparroa

I got same issue when I develop ionic app with android and ios.

sliontc avatar Aug 31 '15 05:08 sliontc

I have the same problem,but I solved it by adding "soapaction" in cors.allowed.headers. my config file:

cors

alexin0007 avatar Oct 05 '15 13:10 alexin0007

I had the same issue as you guys and adding soapaction as stated bij @alexin0007 worked for me as well. This solved the issue

GuZzie avatar Mar 16 '16 13:03 GuZzie

I'm having this problem

XMLHttpRequest cannot load http://webservices.data-8.co.uk/addresscapture.asmx?wsdl. 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:4000' is therefore not allowed access.

NOT RUNNING THIS FROM A SERVER

This is running from an Angular SPA - so it all client side .... No TOMCAT or Other services on client browsers -

For testing my bundle is served from WebPack dev dev server - http://localhost:4000

codeuniquely avatar Jul 05 '17 06:07 codeuniquely