Angularjs CORS failure with FireFox

Question

The script below (part of a larger jquery 2.1.4 and angularjs 1.3.16) works beautifully with Chrome(44) and IE(11) but fails with FF(39) with a CORS error: "Cross-Origin Request Blocked" is cross domain.

I've searched and searched, banged my head against the keyboard, drank lots of Dew, looking for a solution. My "guess" is there might be a custom header that FF requires. But I don't have much understanding into this and can't seem to find that custom header setting, if it exists.

I'm on day two on this. Any help would be highly appreciated!!

Any ideas?

$http({
        url: MYBASEWEBSERVICEURL + 'SearchProductByCriteria',
        method: 'POST',
        data: postdata,
    })
    .success(function (data) {
        //do angular stuff with the data
    })
    .error(function () {
        //do stuff with the !data
    });

Here are the headers taken from Postman:

Access-Control-Allow-Origin → *
Cache-Control → private
Content-Length → 1880
Content-Type → application/json; charset=utf-8
Date → Thu, 06 Aug 2015 20:20:39 GMT
Server → Microsoft-IIS/8.5
X-AspNet-Version → 4.0.30319
X-Powered-By → ASP.NET

Headers taken from the FF browser:

Response:

Access-Control-Allow-Origin:"*"
Cache-Control:"private"
Content-Length:"649"
Content-Type:"application/json; charset=utf-8"
Date:"Thu, 06 Aug 2015 20:49:21 GMT"
Server:"Microsoft-IIS/8.5"
X-AspNet-Version:"4.0.30319"
X-Powered-By:"ASP.NET"

Request:

Host: myhost.net
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

What is specific error? is it a cross domain or cross port request? Not much detail here to work from. Also help to know what response headers are being sent — charlietfl, Aug 06 '15 at 20:07
It's the default JQuery headers, at this point. It is as you see above. The error " Cross-Origin Request Blocked" is cross domain. — Jim Nowak, Aug 06 '15 at 20:16
no such thing as default jQuery headers in a response...the server sets those. Is server set to receive OPTIONS requests — charlietfl, Aug 06 '15 at 20:17
Should really get the ones from browser. Look in dev tools network. Postman doesn't have same restrictions and probably doesn't sent preflight OPTIONS request — charlietfl, Aug 06 '15 at 20:21
browser dev tools network tab ... can see and inspect every request made for whole page — charlietfl, Aug 06 '15 at 20:23

score 2 · Answer 1 · answered Aug 06 '15 at 20:43

2

Set In Your Service Header, IF your service PHP You can use THIS

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Request-Headers: Accept, X-Requested-With');
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, token");

answered Aug 06 '15 at 20:43

Harutyun Abgaryan

2,013
1
12
15

ok, what does "Access-Control-Allow-Credentials: true" do for a site that does not require credentials – Jim Nowak Aug 07 '15 at 16:31

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

After plugging away at this we finally found the problem.

It had to do with certificates and Mozilla.

Refer to this SO post for more information.

(thank you @Godwhacker)

edited May 23 '17 at 12:14

Community

1
1

answered Aug 13 '15 at 19:15

Jim Nowak

135
1
8

Angularjs CORS failure with FireFox

2 Answers2