Spring REST service prevents Cross-Origin Requests with AJAX

Question

Spring REST service prevents Cross-Origin Requests with AJAX

Having Trouble Accessing Spring REST Service

My spring service

@RequestMapping(value = "/MAS/authenticate", method = RequestMethod.POST)
public ResponseEntity<Map<String, String>> authenticate(@RequestBody Subject subject) {
    Map<String, String> result = new HashMap<String, String>();
    result.put("result_detail", "Invalid Password");
    result.put("result", "failure");
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.setContentType(MediaType.APPLICATION_JSON);
    responseHeaders.add("Access-Control-Allow-Origin", "*"); // also added header to allow cross domain request for any domain
    return new ResponseEntity<Map<String, String>>(result, responseHeaders, HttpStatus.OK);
}

My AJAX code

$.ajax(
{
  crossDomain: true,
  type: "POST",
  contentType: "application/json; charset=utf-8",
  async: false,
  url: "http://localhost:8080/SpringMVC/rest/MAS/authenticate",
  headers: {"Access-Control-Allow-Origin" : "*"},
  data:{},
  dataType: "json", //also tried "jsonp"
  success: function(data, status, jqXHR)
  {
    alert('success');
  },
  error: function(jqXHR, status)
  {
    alert('error');
  }
});

Encountering the Following Error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/SpringMVC/rest/MAS/authenticate. This can be fixed by moving the resource to the same domain or enabling CORS.

Attempted using dataType: "jsonp", but it appends my body object into URL resulting in a different URL and hence cannot hit my service URL, resulting in a 404 error.

Browser in use: Firefox version 36.0.4

Seeking assistance on resolving this error, any suggestions?

java javascript html ajax spring

Answer 1

Answer №1

After extensive research, I discovered that the issue was not with my AJAX call or service, but rather a server-side problem.

To resolve CORS requests on the server side using Spring, it is necessary to implement a filter like the one below:

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.web.filter.OncePerRequestFilter;

public class CustomCORSFilter extends OncePerRequestFilter {
    private static final Log LOG = LogFactory.getLog(CustomCORSFilter.class);

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

        response.addHeader("Access-Control-Allow-Origin", "*");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            LOG.trace("Sending Header....");
            // CORS "pre-flight" request
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type");
            response.addHeader("Access-Control-Max-Age", "1");
        }
        filterChain.doFilter(request, response);
    }

}

Lastly, don't forget to apply this filter in your web.xml file for your service requests:

    <filter>
        <filter-name>customCorsFilter</filter-name>
        <filter-class>com.example.package.CustomCORSFilter</filter-class> 
    </filter>
    <filter-mapping>
        <filter-name>customCorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

Hopefully, this solution will assist others facing similar challenges. :)

Answer 2

After extensive research, I discovered that the issue was not with my AJAX call or service, but rather a server-side problem.

To resolve CORS requests on the server side using Spring, it is necessary to implement a filter like the one below:

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.web.filter.OncePerRequestFilter;

public class CustomCORSFilter extends OncePerRequestFilter {
    private static final Log LOG = LogFactory.getLog(CustomCORSFilter.class);

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

        response.addHeader("Access-Control-Allow-Origin", "*");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            LOG.trace("Sending Header....");
            // CORS "pre-flight" request
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type");
            response.addHeader("Access-Control-Max-Age", "1");
        }
        filterChain.doFilter(request, response);
    }

}

Lastly, don't forget to apply this filter in your web.xml file for your service requests:

    <filter>
        <filter-name>customCorsFilter</filter-name>
        <filter-class>com.example.package.CustomCORSFilter</filter-class> 
    </filter>
    <filter-mapping>
        <filter-name>customCorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

Hopefully, this solution will assist others facing similar challenges. :)

Answer 3

Answer №2

Typically, only the GET method is permitted by default and POST is not allowed on your server side:

Access-Control-Allow-Origin: *

The above header grants CORS access, but you should include this as well:

Access-Control-Allow-Methods: POST, GET

For a more detailed guide on HTTP access control (CORS), visit the Mozilla project page

Your code snippet should resemble the following:

responseHeaders.add("Access-Control-Allow-Methods", "POST, GET"); // also added header to allow POST, GET method to be available
responseHeaders.add("Access-Control-Allow-Origin", "*"); // also added header to allow cross domain request for any domain

Update:

Upon reviewing the article again, I discovered some key points:

A simple cross-site request is one that:

Only uses GET, HEAD or POST. If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of application/x-www-form-urlencoded, multipart/form-data, or text/plain.

Does not set custom headers with the HTTP Request (such as X-Modified, etc.)

As indicated in bold, you need to adjust the Content-Type of your data (currently set as

contentType: "application/json; charset=utf-8",

) or explore the preflight technique outlined later:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

Therefore, consider adjusting the contentType or incorporating this header into your request:

Access-Control-Request-Headers: X-HEADER_NAME_OF_YOUR_CHOOSE

along with these headers in your response:

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-HEADER_NAME_OF_YOUR_CHOOSE

Once done, try calling your method again.

Answer 4

Typically, only the GET method is permitted by default and POST is not allowed on your server side:

Access-Control-Allow-Origin: *

The above header grants CORS access, but you should include this as well:

Access-Control-Allow-Methods: POST, GET

For a more detailed guide on HTTP access control (CORS), visit the Mozilla project page

Your code snippet should resemble the following:

responseHeaders.add("Access-Control-Allow-Methods", "POST, GET"); // also added header to allow POST, GET method to be available
responseHeaders.add("Access-Control-Allow-Origin", "*"); // also added header to allow cross domain request for any domain

Update:

Upon reviewing the article again, I discovered some key points:

A simple cross-site request is one that:

Only uses GET, HEAD or POST. If POST is used to send data to the server, the Content-Type of the data sent to the server with the HTTP POST request is one of application/x-www-form-urlencoded, multipart/form-data, or text/plain.

Does not set custom headers with the HTTP Request (such as X-Modified, etc.)

As indicated in bold, you need to adjust the Content-Type of your data (currently set as

contentType: "application/json; charset=utf-8",

) or explore the preflight technique outlined later:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

It sets custom headers in the request (e.g. the request uses a header such as X-PINGOTHER)

Therefore, consider adjusting the contentType or incorporating this header into your request:

Access-Control-Request-Headers: X-HEADER_NAME_OF_YOUR_CHOOSE

along with these headers in your response:

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-HEADER_NAME_OF_YOUR_CHOOSE

Once done, try calling your method again.

Answer 5

Answer №3

Here is the solution for making cross-platform calls to a Spring Boot web service.

To access the application, use the following URL: http://example.com:8080

The webservice can be accessed using this URL: http://example.com:9090

To enable cross-origin requests in your Spring controller, add the following annotation:

@CrossOrigin(origins = "http://example.com:8080")
@RequestMapping(value = "/uri", method = RequestMethod.GET)
public SomeObject someMethod(){
// insert your logic here
}

Answer 6

Here is the solution for making cross-platform calls to a Spring Boot web service.

To access the application, use the following URL: http://example.com:8080

The webservice can be accessed using this URL: http://example.com:9090

To enable cross-origin requests in your Spring controller, add the following annotation:

@CrossOrigin(origins = "http://example.com:8080")
@RequestMapping(value = "/uri", method = RequestMethod.GET)
public SomeObject someMethod(){
// insert your logic here
}

Spring REST service prevents Cross-Origin Requests with AJAX

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve pixel information upon touch in an Appcelerator Titanium application on Android or iPhone

Comparison between Mobile Phone's innerWidth and innerHeight Versus Resolution

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

What are the steps to integrate Webpack into an EJS Reactjs Express MongoDb application?

The function of jQuery .click() not triggering on elements within msDropDown

Make sure to update the package.json file at multiple locations following the execution of the "npm i" command

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

What could be causing the lack of downward rotation of my arrow in css? (specifically, the span element)

The absence of essential DOM types in a TypeScript project is causing issues

Using Node.js and TypeScript to define custom data types has become a common practice among developers

Managing file uploads using the Selenium Server Standalone involves implementing code to interact with

Excessive Function Calls Detected in AngularJS Application

Executing JQuery asynchronous calls sequentially

Leveraging the power of the Twitter API to integrate real-time tweets into custom code

Having a problem with the hover effect on the navbar component

The height of the ReactPlayer dynamically adjusts to accommodate content beyond the boundaries of the page

Error encountered in SelectInput.js file of React MUI 4: line 340 - TypeError: Unable to access properties of undefined (specifically 'value')

The MaterialUI Datagrid is throwing an error message for an Invalid Hook Call

Creating JSON arrays with JavaScript and jQuery

Do I need to include a callback in my AWS Lambda handler function?