How does SoapUI bypass CORS issue when my ajax call can't do it?

Question

This might be a silly question but here is my simple webapi 2 method

public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

Now if I run it , on my pc it runs on http://localhost:3145/Products, and I can see the products as XML

It also works using soapui

enter image description here

But now if I try to access this with a html file and this javascript

      <script type="text/javascript">
            function GetProducts() {


                $.ajax({
                    url: "http://localhost:3145/Products",
                    dataType: "json",
                    success: function (data) {
                        for (var i = 0; i < data.length; i++)
                            $('#myDiv').append(data[i].Category).append("<br/>");
                    },
                    error: function (xhr, status) {
                        alert(xhr);
                    }
                });
            }

        </script>
    </head>
<body onload="GetProducts()">
    <h1>My App</h1>
    <div id="myDiv"></div>

I get the CORS error

enter image description here

How is SOAP UI not getting an error here when it is using http as well?

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 11:45

Put that index file into some server location, and then browse the page with server url , like, http://localhost/virtual_dir/index.html , else it will say it file:/// domain does not match with http://localhost:port . And you might face CORS issue if you deploy this page to some other domain and start using.

I have seen that you are using webapi , and you might face CORS issue if you place you JS in domain ( "example1.com"), i mean files served from example1.com will have ajax calls to webapi and that webapi may be hosted in example2.com. This will raise CORS issue. Browser restricts ajax call to other domains, unless that domain allow you to invoke. To achieve this, you can follow this link - Angular.js $resource with ASP.Net webapi? (don't go by the title)

I have answered there the same scenario.

Graham Hannington · Answer 2 · 2016-12-14T11:18:07.440

I just experienced the same situation with a web page I was developing that needed to send a SOAP request to a web service that was served by a remote server that was not CORS-enabled. This was in a test environment; in production, the web page and web service are served from the same domain and port.

How is SOAP UI not getting an error here when it is using http as well?

Yes, SoapUI and a web browser both use HTTP. But SoapUI is not a web browser, and does not share the same restrictions.

A colleague solved this issue for me by pointing me to CORS Anywhere.

Install Node.js, if you don't already have it.
Install CORS Anywhere (npm install cors-anywhere).
Run CORS Anywhere (node cors-anywhere.js).
Instead of using your original non-CORS-enabled web service URL, use the domain and port in the resulting message from CORS Anywhere ("Running CORS Anywhere on ..."), with your original web service URL as the path component.

You can specify the CORS Anywhere port in an environment variable (or edit the default value in your local copy of cors-anywhere.js).

In my case, the production web service URL is hardcoded in the web page as a relative path. But I've added code that reads a URL from a parameter in the fragment identifier ("hash string"), overriding the default web service URL.

For example:

http://localhost:8081/mywebpage.html#url=http://localhost:8089/remote.domain.com:8085/servicename

where:

http://localhost:8081/mywebpage.html is my web page (I'm using http://, not file://, for this).
http://localhost:8089 is the CORS Anywhere proxy.
remote.domain.com:8085/servicename (you can drop the leading http://) is the remote, non-CORS-enabled web service.

André Vinícius · Answer 3 · 2019-05-30T23:45:11.163

I could point you 2 options to solve this:

Disable your browser CORS: Due the CORS enforcement is done by the browser you can just disable this during development in yourself browser. If you use Chrome, you must just set an parameter otherwise I may guess looking to the underneath image you are using Firefox, for this you have an extension to do this: https://addons.mozilla.org/pt-PT/firefox/addon/cors-everywhere/
Allow CORS in SOAP UI: It can take a little bit more effort than above solution but it fits very good when you need to share with mutiple teammates or just to make the solution attached to the mock service. To do this,you must add a response for the root of resource path that responds to OPTIONS and with headers you need for CORS with status 204 (or 200). After, in the MockService you just need to add a script to grab these same headers in all calls that passes through.

Here is the article to solve this step-by-step: https://medium.com/@andrelimamail/how-to-deal-with-cors-in-soap-ui-mock-services-or-anyother-f4cc55b3dccd

How does SoapUI bypass CORS issue when my ajax call can't do it?

3 Answers3