CriOS unable to recognize OPTIONS request from Tomcat 8

My application uses POST requests with CORS for backend services (from www.mydomain.com to api.mydomain.com). The backend is served by a Tomact8 server, implementing a CORSResponseFilter as shown below:

public class CORSResponseFilter implements ContainerResponseFilter {

   public void filter( ContainerRequestContext requestContext, ContainerResponseContext responseContext ) throws IOException {

       MultivaluedMap< String, Object > headers = responseContext.getHeaders();

       headers.add( "Access-Control-Allow-Origin", "*" );
       headers.add( "Access-Control-Allow-Methods", "POST" );
       headers.add( "Access-Control-Allow-Headers", "X-Requested-With, Content-Type" );
    }
}

While everything is functioning smoothly, Chrome on iOS seems to be an exception (Chrome on Android works fine!). For this specific client, Tomcat appears to be refusing to respond to the pre-flight OPTIONS request. The Tomcat access log snippet below showcases this:

10.10.10.9 - - [14/Sep/2015:20:55:45 +0200] "OPTIONS /api HTTP/1.1" 200 - "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/45.0.2454.68 Mobile/13B5110e Safari/600.1.4"
10.10.10.1 - - [14/Sep/2015:20:56:29 +0200] "OPTIONS /api HTTP/1.1" 200 561 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36"

The discrepancy in response size between these two requests is noticeable, indicating a potential issue with the initial request not receiving a proper response for Chrome on iOS.

Debugging Chrome on iOS using weinre reveals that while the POST request initiates, it never receives a response (even though Tomcat only receives an OPTIONS request and no subsequent POST).

On the client side, HTTP calls are made using the superagent library. It remains unclear whether the problem stems from the Tomcat server or the client/browser, as it solely affects a particular device/browser combination (Chrome on iOS).

Has anyone encountered similar behavior and can offer insight into what may be missing?

PS: Despite the iPhone running a pre-release iOS version, the issue persists with regular iOS versions as well.

UPDATE: Utilizing WireShark, I've compared the headers from the OPTIONS request on both desktop and mobile platforms.

From CriOS:

Connection: keep-alive
Access-Control-Request-Headers: accept, origin, content-type
Access-Control-Request-Method: POST
Accept: */*,image/webp
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/45.0.2454.89 Mobile/13B5110e Safari/600.1.4
Accept-Encoding: gzip, deflate, sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

From desktop:

Connection: keep-alive
Access-Control-Request-Method: POST
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36
Access-Control-Request-Headers: accept, content-type
Accept: */*
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,de-DE;q=0.6,de;q=0.4,ru;q=0.2

One observation is the presence of the image/webp media type in the ACCEPT header, alongside */*. It's uncertain if this detail is significant...

Answer №1

After reading about the issue of Chrome for iOS inserting image/webp content-type, I found a solution by making modifications to the request headers directly on the server:

public class CroISRequestFilter implements ContainerRequestFilter {

    @Override
    public void filter( final ContainerRequestContext requestContext ) throws IOException {

        if (requestContext.getHeaders().getFirst( "accept" ).equals( "*/*,image/webp" )) {
            requestContext.getHeaders().putSingle( "accept", "*/*" );
        }
    }
}

This filter takes care of changing any instances of */*,image/webp content-types to just */*, allowing the server to send back responses with text/plain which helps with CORS compatibility on the client side (CriOS).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The try/catch block proves ineffective at handling a socket connection exception

I am attempting to test connection to a non-existent socket. In this scenario, an exception is thrown and I anticipate it being caught in the try/catch block below. The function createConnection is imported from the net package. try { createConnection( ...

JavaScript Alert function doesn't wait for execution

I am facing an issue with my Signup page. After submitting the form, I use AJAX POST to send the data. The problem arises in the success function where an alert is triggered immediately without waiting for user input, leading to the execution of the next f ...

Efficient File Upload Feature Compatible with all Browsers, Including Internet Explorer versions 7, 8, and 9

Can someone assist me with a problem I'm facing? I need a code script that enables multiple file uploading on all browsers. While HTML5 supports Chrome and Mozilla Firefox, it does not support IE. I am looking for a script/jquery solution that works ...

Having trouble with the Ajax load function not functioning in your HTML code?

The issue has been resolved. Thank you to everyone who helped! Initially, I was attempting to run a file offline instead of on a web server (XAMPP server). Once I uploaded the file to the web server, it started working properly. I had been trying to load ...

Transmitting information to the service array through relentless perseverance

I need assistance finding a solution to my question. Can my friends help me out? What types of requests do I receive: facebook, linkedin, reddit I want to simplify my code and avoid writing lengthy blocks. How can I create a check loop to send the same ...

Is @EJB exclusively used for interfaces in Java EE development?

As someone who is new to EJB, I am currently in the process of creating some basic EJB's (EJB 3.0). My goal is to have a setup where: Remote Client -> Calls EJB (remote) (and this EJB calls a Local EJB). EJB 1: Interface package com.vipin.serv ...

What are the necessary headers that must accompany a post request?

While testing the server with Postman, everything seems to be working fine as I receive a response: https://i.stack.imgur.com/yMRfj.png However, when attempting to make a POST request from the browser using the same address, it results in an error and th ...

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

What steps can I take to refactor a portion of the component using React hooks?

I am trying to rewrite the life cycle methods in hooks but I am facing some issues. It seems like the component is not behaving as expected. How can I correct this? Can you provide guidance on how to properly rewrite it? useEffect(() => { updateUs ...

Error occurred due to an unexpected end of JSON input following a pending promise

I am currently developing a data handler that requires downloading a file for parsing and processing within the handler. To handle this, I have implemented the file request within a promise and called it asynchronously from other methods. Including the h ...

I am currently running a recursive loop to fetch data from MongoDB. However, the Express.js function runs through the entire script before the data can be successfully returned

Can someone assist me with setting up my Express route to handle the return of data from a recursive function that involves promises and fetching MongoDB data? Currently, my route is executing immediately without sending the data back to the client. The da ...

Transferring data from one of the three submitted forms by utilizing jQuery's AJAX function

Currently, I am facing a challenge with three forms on a website, where two of them are located in modal windows. My goal is to use ajax to send input values such as name, phone, email, and radio button selections (which vary in each form). However, I have ...

I'm encountering a 400 error when using xsr.send within my AJAX request in a .NET Core application

I encountered an error 400 while attempting to make an Ajax call in .NET core 2.0 with entity framework using jQuery 2.2. This is how my Controller Method is structured: [HttpPost] [ValidateAntiForgeryToken] public JsonResult RetrieveDateCollectio ...

Experiencing difficulty retrieving data by ID using CodeIgniter with JSON

Currently, I am retrieving the name of sub_regions based on their corresponding region_id using ajax. Upon joining the region and sub_region table, I can view the results within the Google Chrome console. This indicates that the query and other operations ...

Analyzing JSON data and creating a tailor-made array

My Dilemma { "rowId": "1", "product_name": [ "Item A", "Item B", "Item C", "Item D", "Item E" ], "product_tag": [ "123456", "234567", "345678", "456789", "5678 ...

Is it possible to remove certain 'css-' class names that MUI automatically applies to its components? (Using Next JS and MUI)

After successfully migrating my create-react-app project to Next JS using the latest version (12.1.0) and following the migration guide at https://nextjs.org/docs/migrating/from-create-react-app, I encountered an unexpected issue. Despite still using MUI a ...

What is the method to conceal a certain element in jQuery based on the value of another element?

I am dealing with the following HTML structure: <button id="hideToggle">show/hide</button> <form id="item"> <div>Item 1 <input name="item1" type="number"/></div> <div>Item 2 <input name="item2" type="nu ...

Troubleshooting issues with JavaScript's window.location.href functionality

Trying to change the URL using window.location.href doesn't seem to be working for a specific link. The current page URL is: http://localhost:37368/Office/Search/c2VhcmNoaWRzPTEyMiwxMjIsMTI0LDE1OCwzNzl8bG9jYXRpb25pZHM9MSwyfGZyb21pZHM9fHRvaWRzPQ== Af ...

Combining input streams using node.js and ffmpeg

Currently, I'm in the process of developing a basic and straightforward Video-Web-Chat platform. My approach involves utilizing the getUserMedia API call on the client side to capture webcam data and transmit it as data-blob to my server. My plan is ...

What is the best way to showcase information retrieved using the getDocs function from Firebase Firestore?

Hello! I am currently exploring the world of Firestore and facing a challenge. My goal is to retrieve a data object from Firestore, set it as state, and then display it on my application: Below are the imports that I have utilized for this task (please ig ...